fix: loader overflow

Author: Szedann

apps/onelauncher/frontend/src/components/content/PackageItem.tsx

@@ -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>
 	);
 }