Skip to content

GML-74: Fix visible mods for AddingModsDialog #155

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Scondic merged 1 commit into from
Jan 5, 2026
Merged

GML-74: Fix visible mods for AddingModsDialog #155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 28 additions & 26 deletions src/widgets/adding-mods-dialog/ui/AddingModsDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,14 @@ interface ProfileModDialog {
profile?: ProfileExtendedBaseEntity;
modDirection: string;
modType: ModType;
disabled: boolean;
}

export function AddingModsDialog({ profile, modDirection, modType }: ProfileModDialog) {
export function AddingModsDialog({ profile, modDirection, modType, disabled }: ProfileModDialog) {
const form = useForm<SearchFormSchemaType>();
const [searchQuery, setSearchQuery] = useState<string>('');
const { ref, inView } = useInView();

// Используем useCallback для мемоизации функции поиска
const handleSearch = useCallback(
debounce((query: string) => {
setSearchQuery(query);
Expand All @@ -52,19 +52,16 @@ export function AddingModsDialog({ profile, modDirection, modType }: ProfileModD
const {
data: searchMods,
status,
error,
fetchNextPage,
refetch,
} = useSearchMods(profile?.profileName ?? '', searchQuery, modType);

// Эффект для автоматического поиска при изменении searchQuery
useEffect(() => {
if (searchQuery) {
refetch();
}
}, [searchQuery, refetch]);

// Эффект для пагинации
useEffect(() => {
if (inView) {
fetchNextPage();
Expand All @@ -75,22 +72,21 @@ export function AddingModsDialog({ profile, modDirection, modType }: ProfileModD
handleSearch(content.name);
};

// Добавляем обработчик изменений инпута для живого поиска
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
handleSearch(e.target.value);
};

return (
<Drawer>
<DrawerTrigger className="flex items-start">
<Button variant="secondary" className="w-max gap-2">
<DrawerTrigger disabled={disabled} className="flex items-start">
<Button variant="secondary" className="w-max gap-2" disabled={disabled}>
{modType === 1 ? (
<Image src={modrinth} alt="Modrinth" className="w-4 h-4" />
<Image src={modrinth} alt="Modrinth" className="w-4 h-4"/>
) : (
<Image src={curseforge} alt="Curseforge" className="w-4 h-4" />
<Image src={curseforge} alt="Curseforge" className="w-4 h-4"/>
)}
Добавить
<PlusIcon width={16} height={16} />
<PlusIcon width={16} height={16}/>
</Button>
</DrawerTrigger>
<DrawerContent>
Expand All @@ -100,26 +96,30 @@ export function AddingModsDialog({ profile, modDirection, modType }: ProfileModD
<Badge className="cursor-pointer text-sm bg-blue-500 text-white hover:bg-opacity-100 hover:bg-blue-500">
{modDirection}
</Badge>
<Badge className="cursor-pointer h-7 text-sm bg-white bg-opacity-10 text-white text-opacity-90 hover:bg-opacity-100 hover:bg-white hover:text-black">
<Badge
className="cursor-pointer h-7 text-sm bg-white bg-opacity-10 text-white text-opacity-90 hover:bg-opacity-100 hover:bg-white hover:text-black">
{modType === 1 ? (
<>
<Image src={modrinth} alt="Modrinth" className="w-4 h-4 mr-2" />
<Image src={modrinth} alt="Modrinth" className="w-4 h-4 mr-2"/>
Modrinth
</>
) : (
<>
<Image src={curseforge} alt="Curseforge" className="w-4 h-4 mr-2" />
<Image src={curseforge} alt="Curseforge" className="w-4 h-4 mr-2"/>
CurseForge
</>
)}
</Badge>
<Badge className="cursor-pointer text-sm bg-white bg-opacity-10 text-white text-opacity-90 hover:bg-opacity-100 hover:bg-white hover:text-black">
<Badge
className="cursor-pointer text-sm bg-white bg-opacity-10 text-white text-opacity-90 hover:bg-opacity-100 hover:bg-white hover:text-black">
Minecraft: {profile?.minecraftVersion}
</Badge>
<Badge className="cursor-pointer text-sm bg-white bg-opacity-10 text-white text-opacity-90 hover:bg-opacity-100 hover:bg-white hover:text-black">
<Badge
className="cursor-pointer text-sm bg-white bg-opacity-10 text-white text-opacity-90 hover:bg-opacity-100 hover:bg-white hover:text-black">
Загрузчик: {profile?.launchVersion}
</Badge>
<Badge className="cursor-pointer text-sm bg-white bg-opacity-10 text-white text-opacity-90 hover:bg-opacity-100 hover:bg-white hover:text-black">
<Badge
className="cursor-pointer text-sm bg-white bg-opacity-10 text-white text-opacity-90 hover:bg-opacity-100 hover:bg-white hover:text-black">
Фильтр: Mods
</Badge>
</DrawerTitle>
Expand All @@ -139,7 +139,7 @@ export function AddingModsDialog({ profile, modDirection, modType }: ProfileModD
</FormItem>

<Button type="submit" className="w-fit ml-auto" disabled={status === 'pending'}>
{status === 'pending' && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
{status === 'pending' && <Icons.spinner className="mr-2 h-4 w-4 animate-spin"/>}
Поиск
</Button>
</form>
Expand All @@ -152,20 +152,22 @@ export function AddingModsDialog({ profile, modDirection, modType }: ProfileModD
<Card key={mod?.id} className="py-4 px-5">
<div className="flex gap-4 h-full">
<Avatar className="w-8 h-8 mt-2">
<AvatarImage src={mod?.iconUrl} alt="Icon" />
<AvatarImage src={mod?.iconUrl} alt="Icon"/>
<AvatarFallback>
<FileIcon />
<FileIcon/>
</AvatarFallback>
</Avatar>
<div className="flex flex-col h-full">
<h3 className="flex items-center font-bold text-sm gap-2">
{mod?.name}
<Badge className="gap-1 cursor-pointer text-sm bg-white bg-opacity-10 text-white text-opacity-90 hover:bg-opacity-100 hover:bg-white hover:text-black">
<DownloadIcon width={16} height={16} />
<Badge
className="gap-1 cursor-pointer text-sm bg-white bg-opacity-10 text-white text-opacity-90 hover:bg-opacity-100 hover:bg-white hover:text-black">
<DownloadIcon width={16} height={16}/>
{formatNumber(mod?.downloadCount)}
</Badge>
<Badge className="gap-1 cursor-pointer text-sm bg-white bg-opacity-10 text-white text-opacity-90 hover:bg-opacity-100 hover:bg-white hover:text-black">
<HeartFilledIcon className="text-red-500" width={16} height={16} />
<Badge
className="gap-1 cursor-pointer text-sm bg-white bg-opacity-10 text-white text-opacity-90 hover:bg-opacity-100 hover:bg-white hover:text-black">
<HeartFilledIcon className="text-red-500" width={16} height={16}/>
{formatNumber(mod?.followsCount)}
</Badge>
</h3>
Expand All @@ -181,12 +183,12 @@ export function AddingModsDialog({ profile, modDirection, modType }: ProfileModD
))}

<div ref={ref} className="flex items-center justify-center p-5">
<Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
<Icons.spinner className="mr-2 h-4 w-4 animate-spin"/>
</div>
</div>
) : (
<div className="flex flex-col items-center justify-center">
<FileIcon className="w-12 h-12 text-muted-foreground mb-4" />
<FileIcon className="w-12 h-12 text-muted-foreground mb-4"/>
<p className="text-lg font-bold">Ничего не найдено</p>
<p className="text-muted-foreground">
Попробуйте изменить запрос или проверьте параметры фильтрации.
Expand Down
43 changes: 16 additions & 27 deletions src/widgets/client-hub/ui/DownloadClientHub.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,14 @@ import { ArrowBigDownDash, ChevronsUpDown, Package2Icon } from 'lucide-react';

import { useConnectionHub } from '../lib/useConnectionHub';

import {
JavaVersionBaseEntity,
ProfileExtendedBaseEntity,
RestoreProfileSchemaType,
} from '@/shared/api/contracts';
import { JavaVersionBaseEntity, ProfileExtendedBaseEntity, RestoreProfileSchemaType, } from '@/shared/api/contracts';
import { cn } from '@/shared/lib/utils';
import { Button } from '@/shared/ui/button';
import { Progress } from '@/shared/ui/progress';
import { Textarea } from '@/shared/ui/textarea';
import { Icons } from '@/shared/ui/icons';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/shared/ui/form';
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from '@/shared/ui/command';
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from '@/shared/ui/command';
import { Separator } from '@/shared/ui/separator';
import { Popover, PopoverContent, PopoverTrigger } from '@/shared/ui/popover';

Expand Down Expand Up @@ -87,8 +76,8 @@ export function DownloadClientHub(props: DownloadClientHubProps) {
Управление
{!isConnected && <sup className="text-xs text-gray-400">Подключение к консоли...</sup>}
</h5>
<div className="grid grid-rows-3 grid-cols-1 xl:grid-rows-2 xl:grid-cols-2 min-[1920px]:grid-cols-[400px_400px_1fr] min-[1920px]:grid-rows-1 gap-6">
{/* Карточка 1 шаг */}
<div
className="grid grid-rows-3 grid-cols-1 xl:grid-rows-2 xl:grid-cols-2 min-[1920px]:grid-cols-[400px_400px_1fr] min-[1920px]:grid-rows-1 gap-6">
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
<div className="flex flex-col h-full rounded-lg border bg-card text-card-foreground shadow-sm p-6 gap-3">
Expand Down Expand Up @@ -118,12 +107,12 @@ export function DownloadClientHub(props: DownloadClientHubProps) {
? `${(JSON.parse(field.value) as JavaVersionBaseEntity).name}@${(JSON.parse(field.value) as JavaVersionBaseEntity).version}`
: 'По умолчанию'}
</span>
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50"/>
</Button>
</PopoverTrigger>
<PopoverContent>
<Command>
<CommandInput placeholder="Поиск версий..." />
<CommandInput placeholder="Поиск версий..."/>
<CommandList>
<CommandEmpty>Версия не найдена</CommandEmpty>
<CommandGroup>
Expand All @@ -142,7 +131,7 @@ export function DownloadClientHub(props: DownloadClientHubProps) {
</div>
</div>
</CommandItem>
<Separator className="my-2" />
<Separator className="my-2"/>
{javaVersions.data &&
javaVersions.data.map((version, i) => (
<CommandItem
Expand Down Expand Up @@ -172,7 +161,7 @@ export function DownloadClientHub(props: DownloadClientHubProps) {
</PopoverContent>
</Popover>
</FormControl>
<FormMessage />
<FormMessage/>
</FormItem>
)}
/>
Expand All @@ -183,18 +172,18 @@ export function DownloadClientHub(props: DownloadClientHubProps) {
!isConnected || isDisable || !props.profile || !props.profile.hasUpdate
}
>
{isDisable && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
<ArrowBigDownDash width={16} height={16} className="mr-2" />
{isDisable && <Icons.spinner className="mr-2 h-4 w-4 animate-spin"/>}
<ArrowBigDownDash width={16} height={16} className="mr-2"/>
Загрузить
</Button>
</div>
</div>
</form>
</Form>

{/* Карточка 2 шаг */}
<div className="flex flex-col rounded-lg text-card-foreground shadow-sm relative ">
<div className="flex flex-col rounded-lg border bg-card text-card-foreground shadow-sm justify-between p-6 gap-3 h-full">
<div
className="flex flex-col rounded-lg border bg-card text-card-foreground shadow-sm justify-between p-6 gap-3 h-full">
<div className="flex flex-col gap-y-1">
<h6 className="text-xl font-bold">Шаг второй</h6>
<p className="text-sm text-gray-700 dark:text-gray-300">
Expand All @@ -207,8 +196,8 @@ export function DownloadClientHub(props: DownloadClientHubProps) {
onClick={onBuildDistributive}
disabled={!isConnected || isDisable || !props.profile || !props.profile.hasUpdate}
>
{isDisable && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
<Package2Icon width={16} height={16} className="mr-2" />
{isDisable && <Icons.spinner className="mr-2 h-4 w-4 animate-spin"/>}
<Package2Icon width={16} height={16} className="mr-2"/>
Собрать
</Button>
</div>
Expand Down Expand Up @@ -250,8 +239,8 @@ export function DownloadClientHub(props: DownloadClientHubProps) {
<span>Общий прогресс: {percentAllStages}%</span>
</div>
<div className="relative">
<Progress className="h-2 absolute opacity-70" value={percentStage} />
<Progress className="h-2 absolute opacity-50" value={percentAllStages} />
<Progress className="h-2 absolute opacity-70" value={percentStage}/>
<Progress className="h-2 absolute opacity-50" value={percentAllStages}/>
</div>
</div>
</div>
Expand Down
Loading