MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-18 22:33:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

improve search tab

Browse Source
This commit is contained in:
pa
2026-03-12 20:55:43 +09:00
parent 08e160ff69
commit 76ff4844db
14 changed files with 1240 additions and 593 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ui/tabs/TabsTrigger.vue
View File

@@ -21,7 +21,7 @@
data-slot="tabs-trigger"
:class="
cn(
'data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
'data-[state=active]:bg-background data-[state=active]:border dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
props.class
)
"

3
src/localization/en.json
View File

@@ -221,6 +221,9 @@
"avatar": {
"header": "Avatar",
"search_provider": "Search Provider",
"no_provider": "No avatar search provider configured",
"search_placeholder_avatar": "Type at least 3 characters",
"min_chars_warning": "Please enter at least 3 characters to search",
"refresh_tooltip": "Refresh own avatars",
"result_count": "Results {count}",
"all": "All",

8
src/stores/avatarProvider.js
View File

@@ -111,12 +111,8 @@ export const useAvatarProviderStore = defineStore('AvatarProvider', () => {
}
async function saveAvatarProviderList() {
const length = avatarRemoteDatabaseProviderList.value.length;
for (let i = 0; i < length; ++i) {
if (!avatarRemoteDatabaseProviderList.value[i]) {
avatarRemoteDatabaseProviderList.value.splice(i, 1);
}
}
avatarRemoteDatabaseProviderList.value =
avatarRemoteDatabaseProviderList.value.filter(Boolean);
await configRepository.setString(
'VRCX_avatarRemoteDatabaseProviderList',
JSON.stringify(avatarRemoteDatabaseProviderList.value)

809
src/views/Search/Search.vue
View File

@@ -1,87 +1,107 @@
<template>
<div class="x-container">
<div class="mt-0 mx-0 mb-2" style="display: flex; align-items: center">
<InputGroupField
:model-value="searchText"
:placeholder="t('view.search.search_placeholder')"
style="flex: 1"
clearable
@input="updateSearchText"
@keyup.enter="search" />
<TooltipWrapper side="bottom" :content="t('view.search.clear_results_tooltip')">
<Button class="rounded-full ml-2" size="icon" variant="ghost" @click="handleClearSearch"
><Trash2
/></Button>
</TooltipWrapper>
</div>
<TabsUnderline
class="mt-4"
<div class="x-container flex flex-col overflow-hidden">
<Tabs
v-model="activeSearchTab"
:items="searchTabs"
:unmount-on-hide="false"
aria-label="Search tabs"
:unmount-on-hide="false">
<template #user>
<div style="min-height: 60px">
<label class="inline-flex items-center gap-2 ml-2">
<Checkbox v-model="searchUserByBio" />
<span>{{ t('view.search.user.search_by_bio') }}</span>
</label>
<label class="inline-flex items-center gap-2 ml-2">
<Checkbox v-model="searchUserSortByLastLoggedIn" />
<span>{{ t('view.search.user.sort_by_last_logged_in') }}</span>
</label>
<div style="min-height: 500px">
<div
v-for="user in searchUserResults"
:key="user.id"
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer hover:bg-muted/50 hover:rounded-lg"
@click="showUserDialog(user.id)">
<div class="relative inline-block flex-none size-9 mr-2.5">
<img
class="size-full rounded-full object-cover"
:src="userImage(user, true)"
loading="lazy" />
</div>
<div class="flex-1 overflow-hidden">
<span
class="block truncate font-medium leading-[18px]"
v-text="user.displayName"></span>
<span
v-if="randomUserColours"
class="block truncate text-xs"
:class="user.$trustClass"
v-text="user.$trustLevel"></span>
<span
v-else
class="block truncate text-xs"
:style="{ color: user.$userColour }"
v-text="user.$trustLevel"></span>
</div>
</div>
</div>
<ButtonGroup class="mt-4" v-if="searchUserResults.length">
<Button
variant="outline"
size="sm"
:disabled="!searchUserParams.offset"
@click="handleMoreSearchUser(-1)">
<ArrowLeft />
{{ t('view.search.prev_page') }}
class="flex flex-col min-h-0 flex-1">
<div class="mt-0 mx-0 mb-2 flex items-center gap-5">
<TabsList>
<TabsTrigger value="user">{{ t('view.search.user.header') }}</TabsTrigger>
<TabsTrigger value="world">{{ t('view.search.world.header') }}</TabsTrigger>
<TabsTrigger value="avatar">{{ t('view.search.avatar.header') }}</TabsTrigger>
<TabsTrigger value="group">{{ t('view.search.group.header') }}</TabsTrigger>
</TabsList>
<div class="flex min-w-0 flex-1 items-center">
<InputGroupField
:model-value="searchText"
:placeholder="searchPlaceholder"
style="flex: 1"
clearable
@input="updateSearchText"
@keyup.enter="search" />
<TooltipWrapper side="bottom" :content="t('view.search.clear_results_tooltip')">
<Button class="rounded-full ml-2" size="icon" variant="ghost" @click="handleClearSearch">
<Trash2 />
</Button>
<Button
variant="outline"
size="sm"
:disabled="searchUserResults.length < 10"
@click="handleMoreSearchUser(1)">
<ArrowRight />
{{ t('view.search.next_page') }}
</Button>
</ButtonGroup>
</TooltipWrapper>
</div>
</template>
<template #world>
<div style="min-height: 60px">
<div class="inline-flex justify-between mb-4 w-full">
</div>
<TabsContent value="user" class="flex flex-col min-h-0 flex-1">
<div class="flex flex-col min-h-0" style="flex: 9">
<div class="shrink-0 mb-3 flex justify-end">
<label class="inline-flex items-center gap-2 ml-2">
<Checkbox v-model="searchUserByBio" />
<span>{{ t('view.search.user.search_by_bio') }}</span>
</label>
<label class="inline-flex items-center gap-2 ml-2">
<Checkbox v-model="searchUserSortByLastLoggedIn" />
<span>{{ t('view.search.user.sort_by_last_logged_in') }}</span>
</label>
</div>
<div class="flex-1 overflow-y-auto min-h-0">
<div v-if="isSearchUserLoading" class="flex items-center justify-center h-full">
<Spinner class="text-2xl" />
</div>
<template v-else-if="searchUserResults.length > 0">
<Item
v-for="user in searchUserResults"
:key="user.id"
class="cursor-pointer hover:bg-muted x-hover-list rounded-none"
@click="showUserDialog(user.id)">
<ItemMedia variant="image">
<Avatar>
<AvatarImage :src="userImage(user, true)" loading="lazy" />
<AvatarFallback>
<User class="size-5 text-muted-foreground" />
</AvatarFallback>
</Avatar>
</ItemMedia>
<ItemContent class="min-w-0">
<ItemTitle class="flex items-center gap-1.5 max-w-full">
<span class="truncate">{{ user.displayName }}</span>
<span
v-if="randomUserColours"
class="shrink-0 text-xs font-normal"
:class="user.$trustClass">
{{ user.$trustLevel }}
</span>
<span
v-else
class="shrink-0 text-xs font-normal"
:style="{ color: user.$userColour }">
{{ user.$trustLevel }}
</span>
<span
v-for="item in user.$languages"
:key="item.key"
class="flags shrink-0"
:class="languageClass(item.key)"
:title="item.value" />
</ItemTitle>
<ItemDescription v-if="user.bio" class="line-clamp-1 text-xs!">
{{ user.bio }}
</ItemDescription>
</ItemContent>
</Item>
</template>
<DataTableEmpty v-else type="nodata" />
</div>
</div>
<SearchPagination
:show="paginationConfig.show"
:prev-disabled="paginationConfig.prevDisabled"
:next-disabled="paginationConfig.nextDisabled"
@prev="paginationConfig.onPrev"
@next="paginationConfig.onNext" />
</TabsContent>
<TabsContent value="world" class="flex flex-col min-h-0 flex-1">
<div class="flex flex-col min-h-0" style="flex: 9">
<div class="inline-flex justify-end mb-4 w-full shrink-0 gap-2">
<label class="inline-flex items-center gap-2">
<Checkbox v-model="searchWorldLabs" />
<span>{{ t('view.search.world.community_lab') }}</span>
</label>
<Select
:model-value="searchWorldCategoryIndex"
@update:modelValue="handleSearchWorldCategorySelect"
@@ -100,285 +120,204 @@
</SelectGroup>
</SelectContent>
</Select>
<label class="inline-flex items-center gap-2" style="margin-left: 8px">
<Checkbox v-model="searchWorldLabs" />
<span>{{ t('view.search.world.community_lab') }}</span>
</label>
</div>
<div style="min-height: 500px">
<div
v-for="world in searchWorldResults"
:key="world.id"
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer hover:bg-muted/50 hover:rounded-lg"
@click="showWorldDialog(world.id)">
<div class="relative inline-block flex-none size-9 mr-2.5">
<img
class="size-full rounded-full object-cover"
:src="world.thumbnailImageUrl"
loading="lazy" />
</div>
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]" v-text="world.name"></span>
<span v-if="world.occupants" class="block truncate text-xs"
>{{ world.authorName }} ({{ world.occupants }})</span
>
<span v-else class="block truncate text-xs" v-text="world.authorName"></span>
</div>
<div class="flex-1 overflow-y-auto min-h-0">
<div v-if="isSearchWorldLoading" class="flex items-center justify-center h-full">
<Spinner class="text-2xl" />
</div>
<template v-else-if="searchWorldResults.length > 0">
<ItemGroup class="grid grid-cols-5 gap-3">
<Item
v-for="world in searchWorldResults"
:key="world.id"
variant="outline"
size="sm"
class="cursor-pointer p-3"
as-child>
<div class="overflow-hidden" @click="showWorldDialog(world.id)">
<ItemHeader>
<img
:src="world.thumbnailImageUrl"
:alt="world.name"
loading="lazy"
class="aspect-[16/10] w-full rounded-lg object-cover" />
</ItemHeader>
<ItemContent class="min-w-0">
<TooltipWrapper side="top" :content="world.name">
<ItemTitle class="truncate w-auto">{{ world.name }}</ItemTitle>
</TooltipWrapper>
<ItemDescription v-if="world.occupants" class="line-clamp-1 text-xs">
{{ world.authorName }} ({{ world.occupants }})
</ItemDescription>
<ItemDescription v-else class="line-clamp-1 text-xs">
{{ world.authorName }}
</ItemDescription>
</ItemContent>
</div>
</Item>
</ItemGroup>
</template>
<DataTableEmpty v-else type="nodata" />
</div>
<ButtonGroup v-if="searchWorldResults.length" style="margin-top: 16px">
<Button
variant="outline"
size="sm"
:disabled="!searchWorldParams.offset"
@click="moreSearchWorld(-1)">
<ArrowLeft />
{{ t('view.search.prev_page') }}
</Button>
<Button
variant="outline"
size="sm"
:disabled="searchWorldResults.length < 10"
@click="moreSearchWorld(1)">
<ArrowRight />
{{ t('view.search.next_page') }}
</Button>
</ButtonGroup>
</div>
</template>
<template #avatar>
<div style="min-height: 60px">
<div style="display: flex; align-items: center; justify-content: space-between">
<div style="display: flex; align-items: center">
<Select
v-if="avatarRemoteDatabaseProviderList.length > 1"
:model-value="avatarRemoteDatabaseProvider"
@update:modelValue="setAvatarProvider"
style="margin-right: 6px">
<SelectTrigger size="sm">
<SelectValue :placeholder="t('view.search.avatar.search_provider')" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem
v-for="provider in avatarRemoteDatabaseProviderList"
:key="provider"
:value="provider">
{{ provider }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<TooltipWrapper side="bottom" :content="t('view.search.avatar.refresh_tooltip')">
<Button
class="rounded-full ml-1"
variant="ghost"
size="icon-sm"
:disabled="userDialog.isAvatarsLoading"
@click="refreshUserDialogAvatars">
<Spinner v-if="userDialog.isAvatarsLoading" />
<RefreshCw v-else />
</Button>
</TooltipWrapper>
<span class="text-sm mx-1.5">{{
t('view.search.avatar.result_count', {
count: searchAvatarResults.length
})
}}</span>
</div>
<div style="display: flex; align-items: center">
<RadioGroup
:model-value="searchAvatarFilter"
class="flex items-center gap-4"
style="margin: 6px"
@update:modelValue="handleSearchAvatarFilterChange">
<div class="flex items-center space-x-2">
<RadioGroupItem id="searchAvatarFilter-all" value="all" />
<label for="searchAvatarFilter-all">{{ t('view.search.avatar.all') }}</label>
</div>
<div class="flex items-center space-x-2">
<RadioGroupItem id="searchAvatarFilter-public" value="public" />
<label for="searchAvatarFilter-public">{{ t('view.search.avatar.public') }}</label>
</div>
<div class="flex items-center space-x-2">
<RadioGroupItem id="searchAvatarFilter-private" value="private" />
<label for="searchAvatarFilter-private">{{
t('view.search.avatar.private')
}}</label>
</div>
</RadioGroup>
<Separator orientation="vertical" class="mx-2 h-5" />
<RadioGroup
:model-value="searchAvatarFilterRemote"
class="flex items-center gap-4"
style="margin: 6px"
@update:modelValue="handleSearchAvatarFilterRemoteChange">
<div class="flex items-center space-x-2">
<RadioGroupItem id="searchAvatarFilterRemote-all" value="all" />
<label for="searchAvatarFilterRemote-all">{{ t('view.search.avatar.all') }}</label>
</div>
<div class="flex items-center space-x-2">
<RadioGroupItem id="searchAvatarFilterRemote-local" value="local" />
<label for="searchAvatarFilterRemote-local">{{
t('view.search.avatar.local')
}}</label>
</div>
<div class="flex items-center space-x-2">
<RadioGroupItem
id="searchAvatarFilterRemote-remote"
value="remote"
:disabled="!avatarRemoteDatabase" />
<label for="searchAvatarFilterRemote-remote">{{
t('view.search.avatar.remote')
}}</label>
</div>
</RadioGroup>
</div>
</div>
<div style="display: flex; justify-content: end" class="mt-2">
<SearchPagination
:show="paginationConfig.show"
:prev-disabled="paginationConfig.prevDisabled"
:next-disabled="paginationConfig.nextDisabled"
@prev="paginationConfig.onPrev"
@next="paginationConfig.onNext" />
</TabsContent>
<TabsContent value="avatar" class="flex flex-col min-h-0 flex-1">
<div class="flex flex-col min-h-0" style="flex: 9">
<div class="shrink-0 mb-3 flex items-center justify-end gap-2">
<Select
:model-value="searchAvatarSort"
:disabled="searchAvatarFilterRemote !== 'local'"
style="margin: 6px"
@update:modelValue="handleSearchAvatarSortChange">
v-if="avatarRemoteDatabaseProviderList.length > 0"
:model-value="avatarRemoteDatabaseProvider"
@update:modelValue="setAvatarProvider">
<SelectTrigger size="sm">
<SelectValue :placeholder="t('view.search.avatar.sort_name')" />
<SelectValue :placeholder="t('view.search.avatar.search_provider')" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="name">
{{ t('view.search.avatar.sort_name') }}
</SelectItem>
<SelectItem value="update">
{{ t('view.search.avatar.sort_update') }}
</SelectItem>
<SelectItem value="created">
{{ t('view.search.avatar.sort_created') }}
<SelectItem
v-for="provider in avatarRemoteDatabaseProviderList.filter(Boolean)"
:key="provider"
:value="provider">
{{ provider }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<span v-else class="text-sm text-muted-foreground">
{{ t('view.search.avatar.no_provider') }}
</span>
<Button size="sm" variant="outline" @click="isAvatarProviderDialogVisible = true">
<Settings class="size-4" />
</Button>
</div>
<div style="margin-top: 20px; min-height: 500px">
<div
v-for="avatar in searchAvatarPage"
:key="avatar.id"
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer hover:bg-muted/50 hover:rounded-lg"
@click="showAvatarDialog(avatar.id)">
<div class="relative inline-block flex-none size-9 mr-2.5">
<img
v-if="avatar.thumbnailImageUrl"
class="size-full rounded-full object-cover"
:src="avatar.thumbnailImageUrl"
loading="lazy" />
<img
v-else-if="avatar.imageUrl"
class="size-full rounded-full object-cover"
:src="avatar.imageUrl"
loading="lazy" />
</div>
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]" v-text="avatar.name"></span>
<span
v-if="avatar.releaseStatus === 'public'"
class="block truncate text-xs"
v-text="avatar.releaseStatus"></span>
<span
v-else-if="avatar.releaseStatus === 'private'"
class="block truncate text-xs"
v-text="avatar.releaseStatus"></span>
<span v-else class="block truncate text-xs" v-text="avatar.releaseStatus"></span>
<span class="block truncate text-xs" v-text="avatar.authorName"></span>
</div>
<div class="flex-1 overflow-y-auto min-h-0 mt-2">
<div v-if="isSearchAvatarLoading" class="flex items-center justify-center h-full">
<Spinner class="text-2xl" />
</div>
<template v-else-if="searchAvatarPage.length > 0">
<ItemGroup class="grid grid-cols-5 gap-3">
<Item
v-for="avatar in searchAvatarPage"
:key="avatar.id"
variant="outline"
size="sm"
class="cursor-pointer p-3"
as-child>
<div class="overflow-hidden" @click="showAvatarDialog(avatar.id)">
<ItemHeader>
<img
v-if="avatar.thumbnailImageUrl"
:src="avatar.thumbnailImageUrl"
:alt="avatar.name"
loading="lazy"
class="aspect-[16/10] w-full rounded-lg object-cover" />
<img
v-else-if="avatar.imageUrl"
:src="avatar.imageUrl"
:alt="avatar.name"
loading="lazy"
class="aspect-[16/10] w-full rounded-sm object-cover" />
</ItemHeader>
<ItemContent class="min-w-0">
<TooltipWrapper side="top" :content="avatar.name">
<ItemTitle class="truncate w-auto">{{ avatar.name }}</ItemTitle>
</TooltipWrapper>
<ItemDescription class="line-clamp-1 text-xs">
{{ avatar.authorName }}
</ItemDescription>
</ItemContent>
</div>
</Item>
</ItemGroup>
</template>
<DataTableEmpty v-else type="nodata" />
</div>
<ButtonGroup v-if="searchAvatarPage.length" style="margin-top: 16px">
<Button
variant="outline"
size="sm"
:disabled="!searchAvatarPageNum"
@click="moreSearchAvatar(-1)">
<ArrowLeft />
{{ t('view.search.prev_page') }}
</Button>
<Button
variant="outline"
size="sm"
:disabled="
searchAvatarResults.length < 10 ||
(searchAvatarPageNum + 1) * 10 >= searchAvatarResults.length
"
@click="moreSearchAvatar(1)">
<ArrowRight />
{{ t('view.search.next_page') }}
</Button>
</ButtonGroup>
</div>
</template>
<template #group>
<div style="min-height: 60px">
<div style="min-height: 500px">
<div
<SearchPagination
:show="paginationConfig.show"
:prev-disabled="paginationConfig.prevDisabled"
:next-disabled="paginationConfig.nextDisabled"
@prev="paginationConfig.onPrev"
@next="paginationConfig.onNext" />
</TabsContent>
<TabsContent value="group" class="flex flex-col min-h-0 flex-1">
<div class="flex-1 overflow-y-auto min-h-0" style="flex: 9">
<div v-if="isSearchGroupLoading" class="flex items-center justify-center h-full">
<Spinner class="text-2xl" />
</div>
<template v-else-if="searchGroupResults.length > 0">
<Item
v-for="group in searchGroupResults"
:key="group.id"
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer hover:bg-muted/50 hover:rounded-lg"
class="cursor-pointer hover:bg-muted x-hover-list rounded-none"
@click="showGroupDialog(group.id)">
<div class="relative inline-block flex-none size-9 mr-2.5">
<img
class="size-full rounded-full object-cover"
:src="getSmallThumbnailUrl(group.iconUrl)"
loading="lazy" />
</div>
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">
<span v-text="group.name"></span>
<span style="margin-left: 6px; font-weight: normal">({{ group.memberCount }})</span>
<span
class="text-muted-foreground font-mono text-xs"
style="margin-left: 6px; font-weight: normal"
>{{ group.shortCode }}.{{ group.discriminator }}</span
>
</span>
<span class="block truncate text-xs" v-text="group.description"></span>
</div>
</div>
</div>
<ButtonGroup v-if="searchGroupResults.length" style="margin-top: 16px">
<Button
variant="outline"
size="sm"
:disabled="!searchGroupParams.offset"
@click="moreSearchGroup(-1)">
<ArrowLeft />
{{ t('view.search.prev_page') }}
</Button>
<Button
variant="outline"
size="sm"
:disabled="searchGroupResults.length < 10"
@click="moreSearchGroup(1)">
<ArrowRight />
{{ t('view.search.next_page') }}
</Button>
</ButtonGroup>
<ItemMedia variant="image">
<Avatar class="rounded-sm">
<AvatarImage :src="getSmallThumbnailUrl(group.iconUrl)" loading="lazy" />
<AvatarFallback>
<Users class="size-5 text-muted-foreground" />
</AvatarFallback>
</Avatar>
</ItemMedia>
<ItemContent class="min-w-0">
<ItemTitle class="truncate max-w-full">
{{ group.name }}
<span class="font-normal">({{ group.memberCount }})</span>
<span class="text-muted-foreground font-mono text-xs font-normal">
{{ group.shortCode }}.{{ group.discriminator }}
</span>
</ItemTitle>
<ItemDescription class="truncate text-xs!">
{{ group.description }}
</ItemDescription>
</ItemContent>
</Item>
</template>
<DataTableEmpty v-else type="nodata" />
</div>
</template>
</TabsUnderline>
<SearchPagination
:show="paginationConfig.show"
:prev-disabled="paginationConfig.prevDisabled"
:next-disabled="paginationConfig.nextDisabled"
@prev="paginationConfig.onPrev"
@next="paginationConfig.onNext" />
</TabsContent>
</Tabs>
<AvatarProviderDialog v-model:isAvatarProviderDialogVisible="isAvatarProviderDialogVisible" />
</div>
</template>
<script setup>
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { ArrowLeft, ArrowRight, RefreshCw, Trash2 } from 'lucide-vue-next';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { computed, ref } from 'vue';
import { Settings, Trash2, User, Users } from 'lucide-vue-next';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { DataTableEmpty } from '@/components/ui/data-table';
import { Spinner } from '@/components/ui/spinner';
import AvatarProviderDialog from '../Settings/dialogs/AvatarProviderDialog.vue';
import SearchPagination from './components/SearchPagination.vue';
import {
Item,
ItemContent,
ItemDescription,
ItemGroup,
ItemHeader,
ItemMedia,
ItemTitle
} from '@/components/ui/item';
import { computed, onUnmounted, ref } from 'vue';
import { useMagicKeys, whenever } from '@vueuse/core';
import { toast } from 'vue-sonner';
import { Button } from '@/components/ui/button';
import { ButtonGroup } from '@/components/ui/button-group';
import { Checkbox } from '@/components/ui/checkbox';
import { InputGroupField } from '@/components/ui/input-group';
import { Separator } from '@/components/ui/separator';
import { Spinner } from '@/components/ui/spinner';
import { TabsUnderline } from '@/components/ui/tabs';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
@@ -387,54 +326,73 @@
useAppearanceSettingsStore,
useAuthStore,
useAvatarProviderStore,
useAvatarStore,
useGroupStore,
useSearchStore,
useUserStore,
useWorldStore
useSearchStore
} from '../../stores';
import { convertFileUrlToImageUrl, replaceBioSymbols, userImage } from '../../shared/utils';
import { refreshUserDialogAvatars, showUserDialog } from '../../coordinators/userCoordinator';
import { groupRequest } from '../../api';
import { convertFileUrlToImageUrl, languageClass, userImage } from '../../shared/utils';
import { showAvatarDialog } from '../../coordinators/avatarCoordinator';
import { showGroupDialog } from '../../coordinators/groupCoordinator';
import { showUserDialog } from '../../coordinators/userCoordinator';
import { showWorldDialog } from '../../coordinators/worldCoordinator';
import { useSearchAvatar } from './composables/useSearchAvatar';
import { useSearchWorld } from './composables/useSearchWorld';
import { useSearchUser } from './composables/useSearchUser';
import { useSearchGroup } from './composables/useSearchGroup';
const { randomUserColours } = storeToRefs(useAppearanceSettingsStore());
const { avatarRemoteDatabaseProviderList, avatarRemoteDatabaseProvider } = storeToRefs(useAvatarProviderStore());
const { avatarRemoteDatabaseProviderList, avatarRemoteDatabaseProvider, isAvatarProviderDialogVisible } =
storeToRefs(useAvatarProviderStore());
const { setAvatarProvider } = useAvatarProviderStore();
const { avatarRemoteDatabase } = storeToRefs(useAdvancedSettingsStore());
const { userDialog } = storeToRefs(useUserStore());
const { showAvatarDialog } = useAvatarStore();
const { showWorldDialog } = useWorldStore();
const { showGroupDialog } = useGroupStore();
const { searchText, searchUserResults } = storeToRefs(useSearchStore());
const { clearSearch, moreSearchUser } = useSearchStore();
const { clearSearch } = useSearchStore();
const { cachedConfig } = storeToRefs(useAuthStore());
const { t } = useI18n();
const activeSearchTab = ref('user');
const searchTabs = computed(() => [
{ value: 'user', label: t('view.search.user.header') },
{ value: 'world', label: t('view.search.world.header') },
{ value: 'avatar', label: t('view.search.avatar.header') },
{ value: 'group', label: t('view.search.group.header') }
]);
// Keyboard shortcuts: Alt+Left (prev page) / Alt+Right (next page)
const keys = useMagicKeys();
const stopPrevWatch = whenever(keys['Alt+ArrowLeft'], () => {
if (!paginationConfig.value.prevDisabled) {
paginationConfig.value.onPrev();
}
});
const stopNextWatch = whenever(keys['Alt+ArrowRight'], () => {
if (!paginationConfig.value.nextDisabled) {
paginationConfig.value.onNext();
}
});
onUnmounted(() => {
stopPrevWatch();
stopNextWatch();
});
const searchPlaceholder = computed(() => {
if (activeSearchTab.value === 'avatar') {
return t('view.search.avatar.search_placeholder_avatar');
}
return t('view.search.search_placeholder');
});
const {
searchUserParams,
searchUserByBio,
searchUserSortByLastLoggedIn,
isSearchUserLoading,
searchUser,
handleMoreSearchUser,
clearUserSearch
} = useSearchUser();
const {
searchAvatarFilter,
searchAvatarSort,
searchAvatarFilterRemote,
searchAvatarPageNum,
searchAvatarResults,
searchAvatarPage,
isSearchAvatarLoading,
searchAvatar,
moreSearchAvatar,
handleSearchAvatarFilterChange,
handleSearchAvatarFilterRemoteChange,
handleSearchAvatarSortChange,
clearAvatarSearch
} = useSearchAvatar();
@@ -450,20 +408,56 @@
clearWorldSearch
} = useSearchWorld();
const searchUserParams = ref({});
const searchUserByBio = ref(false);
const searchUserSortByLastLoggedIn = ref(false);
const {
searchGroupParams,
searchGroupResults,
isSearchGroupLoading,
searchGroup,
moreSearchGroup,
clearGroupSearch
} = useSearchGroup();
const isSearchUserLoading = ref(false);
const isSearchGroupLoading = ref(false);
const paginationConfig = computed(() => {
switch (activeSearchTab.value) {
case 'user':
return {
show: searchUserResults.value.length > 0 && !isSearchUserLoading.value,
prevDisabled: !searchUserParams.value.offset,
nextDisabled: searchUserResults.value.length < 10,
onPrev: () => handleMoreSearchUser(-1),
onNext: () => handleMoreSearchUser(1)
};
case 'world':
return {
show: searchWorldResults.value.length > 0 && !isSearchWorldLoading.value,
prevDisabled: !searchWorldParams.value.offset,
nextDisabled: searchWorldResults.value.length < 10,
onPrev: () => moreSearchWorld(-1),
onNext: () => moreSearchWorld(1)
};
case 'avatar':
return {
show: searchAvatarPage.value.length > 0 && !isSearchAvatarLoading.value,
prevDisabled: !searchAvatarPageNum.value,
nextDisabled:
searchAvatarResults.value.length < 10 ||
(searchAvatarPageNum.value + 1) * 10 >= searchAvatarResults.value.length,
onPrev: () => moreSearchAvatar(-1),
onNext: () => moreSearchAvatar(1)
};
case 'group':
return {
show: searchGroupResults.value.length > 0 && !isSearchGroupLoading.value,
prevDisabled: !searchGroupParams.value.offset,
nextDisabled: searchGroupResults.value.length < 10,
onPrev: () => moreSearchGroup(-1),
onNext: () => moreSearchGroup(1)
};
default:
return { show: false, prevDisabled: true, nextDisabled: true, onPrev: () => {}, onNext: () => {} };
}
});
const searchGroupParams = ref({});
const searchGroupResults = ref([]);
/**
*
* @param url
*/
function getSmallThumbnailUrl(url) {
return convertFileUrlToImageUrl(url);
}
@@ -472,11 +466,10 @@
*
*/
function handleClearSearch() {
searchUserParams.value = {};
clearUserSearch();
clearWorldSearch();
clearAvatarSearch();
searchGroupParams.value = {};
searchGroupResults.value = [];
clearGroupSearch();
clearSearch();
}
@@ -488,19 +481,14 @@
searchText.value = text;
}
/**
*
* @param tabName
*/
function handleSearchTabChange(tabName) {
searchText.value = '';
activeSearchTab.value = tabName;
}
/**
*
*/
function search() {
if (activeSearchTab.value === 'avatar' && (!searchText.value || searchText.value.length < 3)) {
toast.warning(t('view.search.avatar.min_chars_warning'));
return;
}
switch (activeSearchTab.value) {
case 'user':
searchUser();
@@ -516,67 +504,4 @@
break;
}
}
/**
*
*/
async function searchUser() {
searchUserParams.value = {
n: 10,
offset: 0,
search: searchText.value,
customFields: searchUserByBio.value ? 'bio' : 'displayName',
sort: searchUserSortByLastLoggedIn.value ? 'last_login' : 'relevance'
};
await handleMoreSearchUser();
}
/**
*
* @param go
*/
async function handleMoreSearchUser(go = null) {
isSearchUserLoading.value = true;
await moreSearchUser(go, searchUserParams.value);
isSearchUserLoading.value = false;
}
/**
*
*/
async function searchGroup() {
searchGroupParams.value = {
n: 10,
offset: 0,
query: replaceBioSymbols(searchText.value)
};
await moreSearchGroup();
}
/**
*
* @param go
*/
async function moreSearchGroup(go) {
const params = searchGroupParams.value;
if (go) {
params.offset += params.n * go;
if (params.offset < 0) {
params.offset = 0;
}
}
isSearchGroupLoading.value = true;
await groupRequest
.groupSearch(params)
.finally(() => {
isSearchGroupLoading.value = false;
})
.then((args) => {
const map = new Map();
for (const json of args.json) {
map.set(json.id, json);
}
searchGroupResults.value = Array.from(map.values());
return args;
});
}
</script>

380
src/views/Search/__tests__/Search.test.js Normal file
View File

@@ -0,0 +1,380 @@
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { ref } from 'vue';
import { mount } from '@vue/test-utils';
const mocks = vi.hoisted(() => {
const { ref } = require('vue');
return {
randomUserColours: ref(false),
avatarRemoteDatabaseProviderList: ref(['provider-a']),
avatarRemoteDatabaseProvider: ref('provider-a'),
isAvatarProviderDialogVisible: ref(false),
avatarRemoteDatabase: ref(true),
searchText: ref(''),
searchUserResults: ref([]),
cachedConfig: ref({ dynamicWorldRows: [] }),
clearSearch: vi.fn(),
setAvatarProvider: vi.fn(),
showAvatarDialog: vi.fn(),
showGroupDialog: vi.fn(),
showUserDialog: vi.fn(),
showWorldDialog: vi.fn(),
toastWarning: vi.fn(),
useSearchUserApi: null,
useSearchAvatarApi: null,
useSearchWorldApi: null,
useSearchGroupApi: null
};
});
mocks.useSearchUserApi = {
searchUserParams: ref({ offset: 0 }),
searchUserByBio: ref(false),
searchUserSortByLastLoggedIn: ref(false),
isSearchUserLoading: ref(false),
searchUser: vi.fn(),
handleMoreSearchUser: vi.fn(),
clearUserSearch: vi.fn()
};
mocks.useSearchAvatarApi = {
searchAvatarPageNum: ref(0),
searchAvatarResults: ref([]),
searchAvatarPage: ref([]),
isSearchAvatarLoading: ref(false),
searchAvatar: vi.fn(),
moreSearchAvatar: vi.fn(),
clearAvatarSearch: vi.fn()
};
mocks.useSearchWorldApi = {
searchWorldLabs: ref(false),
searchWorldParams: ref({ offset: 0 }),
searchWorldCategoryIndex: ref(null),
searchWorldResults: ref([]),
isSearchWorldLoading: ref(false),
searchWorld: vi.fn(),
moreSearchWorld: vi.fn(),
handleSearchWorldCategorySelect: vi.fn(),
clearWorldSearch: vi.fn()
};
mocks.useSearchGroupApi = {
searchGroupParams: ref({ offset: 0 }),
searchGroupResults: ref([]),
isSearchGroupLoading: ref(false),
searchGroup: vi.fn(),
moreSearchGroup: vi.fn(),
clearGroupSearch: vi.fn()
};
vi.mock('pinia', async (importOriginal) => {
const actual = await importOriginal();
return {
...actual,
storeToRefs: (store) => store
};
});
vi.mock('vue-i18n', () => ({
useI18n: () => ({
t: (key) => key
})
}));
vi.mock('vue-sonner', () => ({
toast: {
warning: (...args) => mocks.toastWarning(...args)
}
}));
vi.mock('@vueuse/core', async (importOriginal) => {
const actual = await importOriginal();
return {
...actual,
useMagicKeys: () => ({}),
whenever: () => vi.fn()
};
});
vi.mock('../../../stores', () => ({
useAppearanceSettingsStore: () => ({
randomUserColours: mocks.randomUserColours
}),
useAvatarProviderStore: () => ({
avatarRemoteDatabaseProviderList: mocks.avatarRemoteDatabaseProviderList,
avatarRemoteDatabaseProvider: mocks.avatarRemoteDatabaseProvider,
isAvatarProviderDialogVisible: mocks.isAvatarProviderDialogVisible,
setAvatarProvider: (...args) => mocks.setAvatarProvider(...args)
}),
useAdvancedSettingsStore: () => ({
avatarRemoteDatabase: mocks.avatarRemoteDatabase
}),
useSearchStore: () => ({
searchText: mocks.searchText,
searchUserResults: mocks.searchUserResults,
clearSearch: (...args) => mocks.clearSearch(...args)
}),
useAuthStore: () => ({
cachedConfig: mocks.cachedConfig
})
}));
vi.mock('../composables/useSearchUser', () => ({
useSearchUser: () => mocks.useSearchUserApi
}));
vi.mock('../composables/useSearchAvatar', () => ({
useSearchAvatar: () => mocks.useSearchAvatarApi
}));
vi.mock('../composables/useSearchWorld', () => ({
useSearchWorld: () => mocks.useSearchWorldApi
}));
vi.mock('../composables/useSearchGroup', () => ({
useSearchGroup: () => mocks.useSearchGroupApi
}));
vi.mock('../../../coordinators/avatarCoordinator', () => ({
showAvatarDialog: (...args) => mocks.showAvatarDialog(...args)
}));
vi.mock('../../../coordinators/groupCoordinator', () => ({
showGroupDialog: (...args) => mocks.showGroupDialog(...args)
}));
vi.mock('../../../coordinators/userCoordinator', () => ({
showUserDialog: (...args) => mocks.showUserDialog(...args)
}));
vi.mock('../../../coordinators/worldCoordinator', () => ({
showWorldDialog: (...args) => mocks.showWorldDialog(...args)
}));
vi.mock('../../../shared/utils', () => ({
convertFileUrlToImageUrl: (url) => url,
languageClass: (lang) => `lang-${lang}`,
userImage: () => 'https://example.com/u.png'
}));
vi.mock('@/components/ui/tabs', () => ({
Tabs: {
props: ['modelValue'],
emits: ['update:modelValue'],
template:
'<div data-testid="tabs">' +
'<button data-testid="set-tab-user" @click="$emit(\'update:modelValue\', \'user\')" />' +
'<button data-testid="set-tab-avatar" @click="$emit(\'update:modelValue\', \'avatar\')" />' +
'<button data-testid="set-tab-group" @click="$emit(\'update:modelValue\', \'group\')" />' +
'<slot />' +
'</div>'
},
TabsList: { template: '<div><slot /></div>' },
TabsTrigger: { props: ['value'], template: '<button :data-value="value"><slot /></button>' },
TabsContent: { props: ['value'], template: '<section :data-testid="`content-${value}`"><slot /></section>' }
}));
vi.mock('@/components/ui/button', () => ({
Button: {
emits: ['click'],
template: '<button data-testid="button" v-bind="$attrs" @click="$emit(\'click\')"><slot /></button>'
}
}));
vi.mock('@/components/ui/checkbox', () => ({
Checkbox: {
props: ['modelValue'],
emits: ['update:modelValue'],
template:
'<input type="checkbox" data-testid="checkbox" :checked="modelValue" @change="$emit(\'update:modelValue\', $event.target.checked)" />'
}
}));
vi.mock('@/components/ui/input-group', () => ({
InputGroupField: {
props: ['modelValue', 'placeholder'],
emits: ['input', 'keyup.enter'],
template:
'<input data-testid="search-input" :value="modelValue" :placeholder="placeholder" @input="$emit(\'input\', $event.target.value)" @keyup.enter="$emit(\'keyup.enter\')" />'
}
}));
vi.mock('@/components/ui/select', () => ({
Select: { template: '<div><slot /></div>' },
SelectContent: { template: '<div><slot /></div>' },
SelectGroup: { template: '<div><slot /></div>' },
SelectItem: { template: '<div><slot /></div>' },
SelectTrigger: { template: '<div><slot /></div>' },
SelectValue: { template: '<div><slot /></div>' }
}));
vi.mock('@/components/ui/item', () => ({
Item: {
emits: ['click'],
template: '<article class="item" @click="$emit(\'click\')"><slot /></article>'
},
ItemGroup: { template: '<div><slot /></div>' },
ItemHeader: { template: '<div><slot /></div>' },
ItemMedia: { template: '<div><slot /></div>' },
ItemContent: { template: '<div><slot /></div>' },
ItemTitle: { template: '<div><slot /></div>' },
ItemDescription: { template: '<div><slot /></div>' }
}));
vi.mock('@/components/ui/avatar', () => ({
Avatar: { template: '<div><slot /></div>' },
AvatarImage: { template: '<img />' },
AvatarFallback: { template: '<span><slot /></span>' }
}));
vi.mock('@/components/ui/data-table', () => ({
DataTableEmpty: { template: '<div data-testid="empty">empty</div>' }
}));
vi.mock('@/components/ui/spinner', () => ({
Spinner: { template: '<i data-testid="spinner" />' }
}));
vi.mock('@/components/ui/tooltip', () => ({
TooltipWrapper: { template: '<div><slot /></div>' }
}));
vi.mock('lucide-vue-next', () => ({
Settings: { template: '<i />' },
Trash2: { template: '<i />' },
User: { template: '<i />' },
Users: { template: '<i />' }
}));
import SearchView from '../Search.vue';
function mountSearch() {
return mount(SearchView, {
global: {
stubs: {
TooltipWrapper: { template: '<div><slot /></div>' },
AvatarProviderDialog: { template: '<div data-testid="avatar-provider-dialog" />' },
SearchPagination: {
props: ['show', 'prevDisabled', 'nextDisabled'],
emits: ['prev', 'next'],
template: '<div data-testid="pagination" />'
}
}
}
});
}
describe('Search.vue', () => {
beforeEach(() => {
mocks.searchText.value = '';
mocks.searchUserResults.value = [];
mocks.randomUserColours.value = false;
mocks.useSearchUserApi.searchUserParams.value = { offset: 0 };
mocks.useSearchUserApi.searchUserByBio.value = false;
mocks.useSearchUserApi.searchUserSortByLastLoggedIn.value = false;
mocks.useSearchUserApi.isSearchUserLoading.value = false;
mocks.useSearchAvatarApi.searchAvatarPageNum.value = 0;
mocks.useSearchAvatarApi.searchAvatarResults.value = [];
mocks.useSearchAvatarApi.searchAvatarPage.value = [];
mocks.useSearchAvatarApi.isSearchAvatarLoading.value = false;
mocks.useSearchWorldApi.searchWorldParams.value = { offset: 0 };
mocks.useSearchWorldApi.searchWorldResults.value = [];
mocks.useSearchWorldApi.isSearchWorldLoading.value = false;
mocks.useSearchGroupApi.searchGroupParams.value = { offset: 0 };
mocks.useSearchGroupApi.searchGroupResults.value = [];
mocks.useSearchGroupApi.isSearchGroupLoading.value = false;
mocks.clearSearch.mockReset();
mocks.toastWarning.mockReset();
mocks.showUserDialog.mockReset();
mocks.showGroupDialog.mockReset();
mocks.useSearchUserApi.searchUser.mockReset();
mocks.useSearchUserApi.clearUserSearch.mockReset();
mocks.useSearchAvatarApi.searchAvatar.mockReset();
mocks.useSearchAvatarApi.clearAvatarSearch.mockReset();
mocks.useSearchWorldApi.searchWorld.mockReset();
mocks.useSearchWorldApi.clearWorldSearch.mockReset();
mocks.useSearchGroupApi.searchGroup.mockReset();
mocks.useSearchGroupApi.clearGroupSearch.mockReset();
});
it('clears all tab searches from toolbar clear button', async () => {
const wrapper = mountSearch();
await wrapper.get('button.ml-2').trigger('click');
expect(mocks.useSearchUserApi.clearUserSearch).toHaveBeenCalledTimes(1);
expect(mocks.useSearchWorldApi.clearWorldSearch).toHaveBeenCalledTimes(1);
expect(mocks.useSearchAvatarApi.clearAvatarSearch).toHaveBeenCalledTimes(1);
expect(mocks.useSearchGroupApi.clearGroupSearch).toHaveBeenCalledTimes(1);
expect(mocks.clearSearch).toHaveBeenCalledTimes(1);
});
it('runs user search on Enter when active tab is user', async () => {
const wrapper = mountSearch();
await wrapper.get('[data-testid="search-input"]').trigger('keyup.enter');
expect(mocks.useSearchUserApi.searchUser).toHaveBeenCalledTimes(1);
expect(mocks.useSearchAvatarApi.searchAvatar).not.toHaveBeenCalled();
});
it('shows avatar minimum length warning and skips avatar search', async () => {
const wrapper = mountSearch();
mocks.searchText.value = 'ab';
await wrapper.get('[data-testid="set-tab-avatar"]').trigger('click');
await wrapper.get('[data-testid="search-input"]').trigger('keyup.enter');
expect(mocks.toastWarning).toHaveBeenCalledWith('view.search.avatar.min_chars_warning');
expect(mocks.useSearchAvatarApi.searchAvatar).not.toHaveBeenCalled();
});
it('opens user dialog when clicking a user item', async () => {
mocks.searchUserResults.value = [
{
id: 'usr_1',
displayName: 'Alice',
bio: 'Hi',
$trustLevel: 'Known User',
$trustClass: 'text-green',
$userColour: '#fff',
$languages: []
}
];
const wrapper = mountSearch();
await wrapper.find('.item').trigger('click');
expect(mocks.showUserDialog).toHaveBeenCalledWith('usr_1');
});
it('opens group dialog when clicking a group item', async () => {
mocks.useSearchGroupApi.searchGroupResults.value = [
{
id: 'grp_1',
iconUrl: 'https://example.com/group.png',
name: 'Group One',
memberCount: 12,
shortCode: 'AB',
discriminator: '1234',
description: 'desc'
}
];
const wrapper = mountSearch();
await wrapper.get('[data-testid="set-tab-group"]').trigger('click');
const items = wrapper.findAll('.item');
await items[items.length - 1].trigger('click');
expect(mocks.showGroupDialog).toHaveBeenCalledWith('grp_1');
});
});

38
src/views/Search/components/SearchPagination.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<div v-if="show" class="shrink-0 flex items-center justify-center h-[60px]">
<ButtonGroup class="shadow-lg rounded-lg">
<Button variant="outline" size="sm" :disabled="prevDisabled" @click="$emit('prev')">
<ArrowLeft />
{{ t('view.search.prev_page') }}
<Kbd class="ml-1">{{ isMac ? '⌥' : 'Alt' }}</Kbd>
<Kbd>←</Kbd>
</Button>
<Button variant="outline" size="sm" :disabled="nextDisabled" @click="$emit('next')">
{{ t('view.search.next_page') }}
<Kbd class="ml-1">{{ isMac ? '⌥' : 'Alt' }}</Kbd>
<Kbd>→</Kbd>
<ArrowRight />
</Button>
</ButtonGroup>
</div>
</template>
<script setup>
import { ArrowLeft, ArrowRight } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { ButtonGroup } from '@/components/ui/button-group';
import { Kbd } from '@/components/ui/kbd';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
defineProps({
show: { type: Boolean, default: false },
prevDisabled: { type: Boolean, default: true },
nextDisabled: { type: Boolean, default: true }
});
defineEmits(['prev', 'next']);
</script>

78
src/views/Search/composables/__tests__/useSearchAvatar.test.js Normal file
View File

@@ -0,0 +1,78 @@
import { describe, expect, it, vi, beforeEach } from 'vitest';
const mocks = vi.hoisted(() => ({
avatarRemoteDatabase: require('vue').ref(true),
searchText: require('vue').ref(''),
lookupAvatars: vi.fn()
}));
vi.mock('pinia', () => ({
storeToRefs: (store) => store
}));
vi.mock('../../../../stores', () => ({
useAdvancedSettingsStore: () => ({
avatarRemoteDatabase: mocks.avatarRemoteDatabase
}),
useSearchStore: () => ({
searchText: mocks.searchText
})
}));
vi.mock('../../../../coordinators/avatarCoordinator', () => ({
lookupAvatars: (...args) => mocks.lookupAvatars(...args)
}));
import { useSearchAvatar } from '../useSearchAvatar';
describe('useSearchAvatar', () => {
beforeEach(() => {
mocks.avatarRemoteDatabase.value = true;
mocks.searchText.value = '';
mocks.lookupAvatars.mockReset();
});
it('queries remote avatars and builds first page', async () => {
mocks.searchText.value = 'alice';
mocks.lookupAvatars.mockResolvedValue([
{ id: 'avtr_1', name: 'A' },
{ id: 'avtr_1', name: 'A-dup' },
{ id: 'avtr_2', name: 'B' }
]);
const api = useSearchAvatar();
await api.searchAvatar();
expect(mocks.lookupAvatars).toHaveBeenCalledWith('search', 'alice');
expect(api.searchAvatarResults.value.map((x) => x.id)).toEqual(['avtr_1', 'avtr_2']);
expect(api.searchAvatarPage.value.map((x) => x.id)).toEqual(['avtr_1', 'avtr_2']);
expect(api.searchAvatarPageNum.value).toBe(0);
});
it('skips remote query when text is too short', async () => {
mocks.searchText.value = 'ab';
const api = useSearchAvatar();
await api.searchAvatar();
expect(mocks.lookupAvatars).not.toHaveBeenCalled();
expect(api.searchAvatarResults.value).toEqual([]);
});
it('paginates results by 10 items', () => {
const api = useSearchAvatar();
api.searchAvatarResults.value = Array.from({ length: 25 }, (_, i) => ({ id: `avtr_${i}` }));
api.searchAvatarPage.value = api.searchAvatarResults.value.slice(0, 10);
api.moreSearchAvatar(1);
expect(api.searchAvatarPageNum.value).toBe(1);
expect(api.searchAvatarPage.value.map((x) => x.id)).toEqual(
Array.from({ length: 10 }, (_, i) => `avtr_${i + 10}`)
);
api.moreSearchAvatar(-1);
expect(api.searchAvatarPageNum.value).toBe(0);
expect(api.searchAvatarPage.value.map((x) => x.id)).toEqual(
Array.from({ length: 10 }, (_, i) => `avtr_${i}`)
);
});
});

64
src/views/Search/composables/__tests__/useSearchGroup.test.js Normal file
View File

@@ -0,0 +1,64 @@
import { beforeEach, describe, expect, it, vi } from 'vitest';
const mocks = vi.hoisted(() => ({
searchText: require('vue').ref(''),
replaceBioSymbols: vi.fn((text) => text),
groupSearch: vi.fn()
}));
vi.mock('pinia', () => ({
storeToRefs: (store) => store
}));
vi.mock('../../../../stores', () => ({
useSearchStore: () => ({
searchText: mocks.searchText
})
}));
vi.mock('../../../../shared/utils', () => ({
replaceBioSymbols: (...args) => mocks.replaceBioSymbols(...args)
}));
vi.mock('../../../../api', () => ({
groupRequest: {
groupSearch: (...args) => mocks.groupSearch(...args)
}
}));
import { useSearchGroup } from '../useSearchGroup';
describe('useSearchGroup', () => {
beforeEach(() => {
mocks.searchText.value = '';
mocks.replaceBioSymbols.mockReset();
mocks.replaceBioSymbols.mockImplementation((text) => text);
mocks.groupSearch.mockReset();
});
it('starts group search with normalized query', async () => {
mocks.searchText.value = 'group+name';
mocks.replaceBioSymbols.mockReturnValue('group name');
mocks.groupSearch.mockResolvedValue({ json: [{ id: 'grp_1' }, { id: 'grp_1' }, { id: 'grp_2' }] });
const api = useSearchGroup();
await api.searchGroup();
expect(mocks.replaceBioSymbols).toHaveBeenCalledWith('group+name');
expect(mocks.groupSearch).toHaveBeenCalledWith({
n: 10,
offset: 0,
query: 'group name'
});
expect(api.searchGroupResults.value.map((x) => x.id)).toEqual(['grp_1', 'grp_2']);
});
it('moves backward paging offset without going below zero', async () => {
mocks.groupSearch.mockResolvedValue({ json: [] });
const api = useSearchGroup();
api.searchGroupParams.value = { n: 10, offset: 5, query: 'abc' };
await api.moreSearchGroup(-1);
expect(mocks.groupSearch).toHaveBeenCalledWith({ n: 10, offset: 0, query: 'abc' });
});
});

53
src/views/Search/composables/__tests__/useSearchUser.test.js Normal file
View File

@@ -0,0 +1,53 @@
import { beforeEach, describe, expect, it, vi } from 'vitest';
const mocks = vi.hoisted(() => ({
searchText: require('vue').ref(''),
moreSearchUser: vi.fn(() => Promise.resolve())
}));
vi.mock('pinia', () => ({
storeToRefs: (store) => store
}));
vi.mock('../../../../stores', () => ({
useSearchStore: () => ({
searchText: mocks.searchText,
moreSearchUser: (...args) => mocks.moreSearchUser(...args)
})
}));
import { useSearchUser } from '../useSearchUser';
describe('useSearchUser', () => {
beforeEach(() => {
mocks.searchText.value = '';
mocks.moreSearchUser.mockReset();
mocks.moreSearchUser.mockResolvedValue(undefined);
});
it('builds search params and requests first page', async () => {
mocks.searchText.value = 'Alice';
const api = useSearchUser();
api.searchUserByBio.value = true;
api.searchUserSortByLastLoggedIn.value = true;
await api.searchUser();
expect(mocks.moreSearchUser).toHaveBeenCalledWith(null, {
n: 10,
offset: 0,
search: 'Alice',
customFields: 'bio',
sort: 'last_login'
});
expect(api.isSearchUserLoading.value).toBe(false);
});
it('passes page direction into handleMoreSearchUser', async () => {
const api = useSearchUser();
api.searchUserParams.value = { n: 10, offset: 10, search: 'Alice', customFields: 'displayName', sort: 'relevance' };
await api.handleMoreSearchUser(-1);
expect(mocks.moreSearchUser).toHaveBeenCalledWith(-1, api.searchUserParams.value);
});
});

97
src/views/Search/composables/__tests__/useSearchWorld.test.js Normal file
View File

@@ -0,0 +1,97 @@
import { beforeEach, describe, expect, it, vi } from 'vitest';
const mocks = vi.hoisted(() => ({
searchText: require('vue').ref(''),
cachedConfig: require('vue').ref({ dynamicWorldRows: [] }),
cachedWorlds: new Map(),
replaceBioSymbols: vi.fn((text) => text),
getWorlds: vi.fn()
}));
vi.mock('pinia', () => ({
storeToRefs: (store) => store
}));
vi.mock('../../../../stores', () => ({
useSearchStore: () => ({
searchText: mocks.searchText
}),
useAuthStore: () => ({
cachedConfig: mocks.cachedConfig
}),
useWorldStore: () => ({
cachedWorlds: mocks.cachedWorlds
})
}));
vi.mock('../../../../shared/utils', () => ({
replaceBioSymbols: (...args) => mocks.replaceBioSymbols(...args)
}));
vi.mock('../../../../api', () => ({
worldRequest: {
getWorlds: (...args) => mocks.getWorlds(...args)
}
}));
import { useSearchWorld } from '../useSearchWorld';
describe('useSearchWorld', () => {
beforeEach(() => {
mocks.searchText.value = '';
mocks.cachedConfig.value = { dynamicWorldRows: [] };
mocks.cachedWorlds.clear();
mocks.replaceBioSymbols.mockReset();
mocks.replaceBioSymbols.mockImplementation((text) => text);
mocks.getWorlds.mockReset();
});
it('creates relevance params and appends system_approved tag', async () => {
mocks.searchText.value = 'home world';
mocks.replaceBioSymbols.mockReturnValue('home world');
mocks.cachedWorlds.set('wrld_1', { id: 'wrld_1', name: 'World One' });
mocks.getWorlds.mockResolvedValue({ json: [{ id: 'wrld_1' }, { id: 'wrld_missing' }] });
const api = useSearchWorld();
api.searchWorld({});
await Promise.resolve();
await Promise.resolve();
expect(mocks.getWorlds).toHaveBeenCalledWith(
{
n: 10,
offset: 0,
sort: 'relevance',
search: 'home world',
order: 'descending',
tag: 'system_approved'
},
''
);
expect(api.searchWorldParams.value.search).toBe('home world');
});
it('selects category row and uses row sort settings', async () => {
mocks.cachedConfig.value = {
dynamicWorldRows: [{ index: 2, sortHeading: 'featured', sortOrder: 'ascending', tag: 'party' }]
};
mocks.getWorlds.mockResolvedValue({ json: [] });
const api = useSearchWorld();
api.handleSearchWorldCategorySelect(2);
await Promise.resolve();
await Promise.resolve();
expect(api.searchWorldCategoryIndex.value).toBe(2);
expect(mocks.getWorlds).toHaveBeenCalledWith(
{
n: 10,
offset: 0,
sort: 'order',
featured: 'true',
order: 'ascending',
tag: 'party,system_approved'
},
''
);
});
});

156
src/views/Search/composables/useSearchAvatar.js
View File

@@ -1,29 +1,17 @@
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import {
compareByCreatedAt,
compareByName,
compareByUpdatedAt
} from '../../../shared/utils';
import {
useAdvancedSettingsStore,
useAvatarStore,
useSearchStore
} from '../../../stores';
import { useAdvancedSettingsStore, useSearchStore } from '../../../stores';
import { lookupAvatars } from '../../../coordinators/avatarCoordinator';
/**
* Avatar search composable for Search view.
* Manages avatar search state, local/remote filtering, sorting, and pagination.
* Searches remote avatar databases only (local avatar browsing is handled by My Avatars page).
*/
export function useSearchAvatar() {
const { avatarRemoteDatabase } = storeToRefs(useAdvancedSettingsStore());
const { lookupAvatars, cachedAvatars } = useAvatarStore();
const { searchText } = storeToRefs(useSearchStore());
const searchAvatarFilter = ref('');
const searchAvatarSort = ref('');
const searchAvatarFilterRemote = ref('');
const searchAvatarPageNum = ref(0);
const searchAvatarResults = ref([]);
const searchAvatarPage = ref([]);
@@ -33,111 +21,26 @@ export function useSearchAvatar() {
*
*/
async function searchAvatar() {
let ref;
isSearchAvatarLoading.value = true;
if (!searchAvatarFilter.value) {
searchAvatarFilter.value = 'all';
}
if (!searchAvatarSort.value) {
searchAvatarSort.value = 'name';
}
if (!searchAvatarFilterRemote.value) {
searchAvatarFilterRemote.value = 'all';
}
if (searchAvatarFilterRemote.value !== 'local') {
searchAvatarSort.value = 'name';
}
const avatars = new Map();
const query = searchText.value;
const queryUpper = query.toUpperCase();
if (!query) {
for (ref of cachedAvatars.values()) {
switch (searchAvatarFilter.value) {
case 'all':
avatars.set(ref.id, ref);
break;
case 'public':
if (ref.releaseStatus === 'public') {
avatars.set(ref.id, ref);
}
break;
case 'private':
if (ref.releaseStatus === 'private') {
avatars.set(ref.id, ref);
}
break;
}
if (query && query.length >= 3 && avatarRemoteDatabase.value) {
const data = await lookupAvatars('search', query);
if (data && typeof data === 'object') {
data.forEach((avatar) => {
avatars.set(avatar.id, avatar);
});
}
isSearchAvatarLoading.value = false;
} else {
if (
searchAvatarFilterRemote.value === 'all' ||
searchAvatarFilterRemote.value === 'local'
) {
for (ref of cachedAvatars.values()) {
let match = ref.name.toUpperCase().includes(queryUpper);
if (!match && ref.description) {
match = ref.description
.toUpperCase()
.includes(queryUpper);
}
if (!match && ref.authorName) {
match = ref.authorName
.toUpperCase()
.includes(queryUpper);
}
if (match) {
switch (searchAvatarFilter.value) {
case 'all':
avatars.set(ref.id, ref);
break;
case 'public':
if (ref.releaseStatus === 'public') {
avatars.set(ref.id, ref);
}
break;
case 'private':
if (ref.releaseStatus === 'private') {
avatars.set(ref.id, ref);
}
break;
}
}
}
}
if (
(searchAvatarFilterRemote.value === 'all' ||
searchAvatarFilterRemote.value === 'remote') &&
avatarRemoteDatabase.value &&
query.length >= 3
) {
const data = await lookupAvatars('search', query);
if (data && typeof data === 'object') {
data.forEach((avatar) => {
avatars.set(avatar.id, avatar);
});
}
}
isSearchAvatarLoading.value = false;
}
isSearchAvatarLoading.value = false;
const avatarsArray = Array.from(avatars.values());
if (searchAvatarFilterRemote.value === 'local') {
switch (searchAvatarSort.value) {
case 'updated':
avatarsArray.sort(compareByUpdatedAt);
break;
case 'created':
avatarsArray.sort(compareByCreatedAt);
break;
case 'name':
avatarsArray.sort(compareByName);
break;
}
}
searchAvatarPageNum.value = 0;
searchAvatarResults.value = avatarsArray;
searchAvatarPage.value = avatarsArray.slice(0, 10);
}
/**
*
* @param n
@@ -158,33 +61,6 @@ export function useSearchAvatar() {
);
}
/**
*
* @param value
*/
function handleSearchAvatarFilterChange(value) {
searchAvatarFilter.value = value;
searchAvatar();
}
/**
*
* @param value
*/
function handleSearchAvatarFilterRemoteChange(value) {
searchAvatarFilterRemote.value = value;
searchAvatar();
}
/**
*
* @param value
*/
function handleSearchAvatarSortChange(value) {
searchAvatarSort.value = value;
searchAvatar();
}
/**
*
*/
@@ -195,18 +71,12 @@ export function useSearchAvatar() {
}
return {
searchAvatarFilter,
searchAvatarSort,
searchAvatarFilterRemote,
searchAvatarPageNum,
searchAvatarResults,
searchAvatarPage,
isSearchAvatarLoading,
searchAvatar,
moreSearchAvatar,
handleSearchAvatarFilterChange,
handleSearchAvatarFilterRemoteChange,
handleSearchAvatarSortChange,
clearAvatarSearch
};
}

75
src/views/Search/composables/useSearchGroup.js Normal file
View File

@@ -0,0 +1,75 @@
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useSearchStore } from '../../../stores';
import { replaceBioSymbols } from '../../../shared/utils';
import { groupRequest } from '../../../api';
/**
* Group search composable for Search view.
* Manages group search state and pagination.
*/
export function useSearchGroup() {
const { searchText } = storeToRefs(useSearchStore());
const searchGroupParams = ref({});
const searchGroupResults = ref([]);
const isSearchGroupLoading = ref(false);
/**
*
*/
async function searchGroup() {
searchGroupParams.value = {
n: 10,
offset: 0,
query: replaceBioSymbols(searchText.value)
};
await moreSearchGroup();
}
/**
*
* @param go
*/
async function moreSearchGroup(go) {
const params = searchGroupParams.value;
if (go) {
params.offset += params.n * go;
if (params.offset < 0) {
params.offset = 0;
}
}
isSearchGroupLoading.value = true;
await groupRequest
.groupSearch(params)
.finally(() => {
isSearchGroupLoading.value = false;
})
.then((args) => {
const map = new Map();
for (const json of args.json) {
map.set(json.id, json);
}
searchGroupResults.value = Array.from(map.values());
return args;
});
}
/**
*
*/
function clearGroupSearch() {
searchGroupParams.value = {};
searchGroupResults.value = [];
}
return {
searchGroupParams,
searchGroupResults,
isSearchGroupLoading,
searchGroup,
moreSearchGroup,
clearGroupSearch
};
}

61
src/views/Search/composables/useSearchUser.js Normal file
View File

@@ -0,0 +1,61 @@
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useSearchStore } from '../../../stores';
/**
* User search composable for Search view.
* Manages user search state, filters, and pagination.
*/
export function useSearchUser() {
const { searchText } = storeToRefs(useSearchStore());
const { moreSearchUser } = useSearchStore();
const searchUserParams = ref({});
const searchUserByBio = ref(false);
const searchUserSortByLastLoggedIn = ref(false);
const isSearchUserLoading = ref(false);
/**
*
*/
async function searchUser() {
searchUserParams.value = {
n: 10,
offset: 0,
search: searchText.value,
customFields: searchUserByBio.value ? 'bio' : 'displayName',
sort: searchUserSortByLastLoggedIn.value
? 'last_login'
: 'relevance'
};
await handleMoreSearchUser();
}
/**
*
* @param go
*/
async function handleMoreSearchUser(go = null) {
isSearchUserLoading.value = true;
await moreSearchUser(go, searchUserParams.value);
isSearchUserLoading.value = false;
}
/**
*
*/
function clearUserSearch() {
searchUserParams.value = {};
}
return {
searchUserParams,
searchUserByBio,
searchUserSortByLastLoggedIn,
isSearchUserLoading,
searchUser,
handleMoreSearchUser,
clearUserSearch
};
}

9
src/views/Settings/dialogs/AvatarProviderDialog.vue
View File

@@ -19,7 +19,7 @@
</template>
</InputGroupAction>
<Button size="sm" style="margin-top: 6px" @click="avatarRemoteDatabaseProviderList.push('')">
<Button size="sm" style="margin-top: 6px" @click="addProvider">
{{ t('dialog.avatar_database_provider.add_provider') }}
</Button>
</div>
@@ -59,4 +59,11 @@
function closeDialog() {
emit('update:isAvatarProviderDialogVisible', false);
}
/**
*
*/
function addProvider() {
avatarRemoteDatabaseProviderList.value.push('');
}
</script>