oiupoyt/OneLauncher-Cracked
1
1
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity

fix: loader overflow

Browse source
This commit is contained in:
Szedann 2025-07-20 19:34:55 +02:00
parent d9c2392992
commit 6634e0648e
1 changed files with 25 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
apps/onelauncher/frontend/src/components/content/PackageItem.tsx
View file

@ -1,8 +1,10 @@
import type { Provider, SearchResult } from '@/bindings.gen';
import { abbreviateNumber, LOADERS } from '@/utils';
import { Show } from '@onelauncher/common/components';
import { useNavigate } from '@tanstack/react-router';
import { abbreviateNumber, LOADERS, upperFirst } from '@/utils';
import { Show, Tooltip } from '@onelauncher/common/components';
import { Link, useNavigate } from '@tanstack/react-router';
import { Download01Icon } from '@untitled-theme/icons-react';
import { useMemo } from 'react';
import { Focusable } from 'react-aria-components';
import LoaderIcon from '../launcher/LoaderIcon';
function includes<T, TArray extends T>(list: { includes: (arg0: TArray) => boolean }, element: T): element is TArray {
@ -20,16 +22,14 @@ export function PackageGrid({ items, provider }: { items: Array<SearchResult>; p
}
export function PackageItem({ provider, ...item }: SearchResult & { provider: Provider }) {
const navigate = useNavigate();
function redirect() {
navigate({ to: '/app/browser/package/$provider/$slug', params: { provider, slug: item.slug } });
}
const loaders = useMemo(() => item.categories.filter(cat => includes(LOADERS, cat)), []);
return (
<div
<Link
className="h-full min-w-50 flex overflow-hidden rounded-lg bg-component-bg hover:bg-component-bg-hover flex-col max-h-74 min-h-74"
onClick={redirect}
params={{ provider, slug: item.slug }}
tabIndex={0}
to="/app/browser/package/$provider/$slug"
>
<div
className="relative flex items-center justify-center overflow-hidden w-full h-28"
@ -49,9 +49,21 @@ export function PackageItem({ provider, ...item }: SearchResult & { provider: Pr
src={item.icon_url}
/>
</Show>
<div className="flex flex-col rounded-full bg-component-bg/70 border-component-border/70 border gap-2 p-2 absolute top-0 right-0 m-2">
{item.categories.filter(cat => includes(LOADERS, cat)).map(loader => <LoaderIcon className="w-5" key={loader} loader={loader} />)}
</div>
<Tooltip text={loaders.map(upperFirst).join(', ')}>
<Focusable>
<div className="flex flex-col rounded-full bg-component-bg/70 border-component-border/70 border p-1 absolute top-0 right-0 m-2">
{loaders.toSpliced(loaders.length > 3 ? 2 : 3).map(loader => <LoaderIcon className="w-5 m-1" key={loader} loader={loader} />)}
{loaders.length > 3 && (
<div className="bg-component-bg/50 rounded-full w-7 h-7 flex items-center justify-center">
<span className="tracking-tight -ml-0.5 mt-0.5">
+
{loaders.length - 2}
</span>
</div>
)}
</div>
</Focusable>
</Tooltip>
</div>
<div className="flex flex-1 flex-col gap-2 p-3">
<div className="flex flex-col gap-2">
@ -78,6 +90,6 @@ export function PackageItem({ provider, ...item }: SearchResult & { provider: Pr
</Show>
</div>
</div>
</div>
</Link>
);
}