feat: packageitem loader icons (WIP)

Author: Szedann

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

@@ -1,8 +1,13 @@
 import type { Provider, SearchResult } from '@/bindings.gen';
-import { abbreviateNumber } from '@/utils';
+import { abbreviateNumber, LOADERS } from '@/utils';
 import { Show } from '@onelauncher/common/components';
 import { useNavigate } from '@tanstack/react-router';
 import { Download01Icon } from '@untitled-theme/icons-react';
+import LoaderIcon from '../launcher/LoaderIcon';
+
+function includes<T, TArray extends T>(list: { includes: (arg0: TArray) => boolean }, element: T): element is TArray {
+	return list.includes(element as unknown as TArray);
+}
 
 export function PackageGrid({ items, provider }: { items: Array<SearchResult>; provider: Provider }) {
 	return (
@@ -44,6 +49,9 @@ 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>
 			</div>
 			<div className="flex flex-1 flex-col gap-2 p-3">
 				<div className="flex flex-col gap-2">

apps/onelauncher/frontend/src/routes/app/browser/search.tsx

@@ -1,12 +1,12 @@
+import type { Paginated, SearchResult } from '@/bindings.gen';
+import type { PaginationOptions } from '@/hooks/usePagination';
 import { PackageGrid } from '@/components/content/PackageItem';
 import { useBrowserContext, useBrowserSearch } from '@/hooks/useBrowser';
+import usePagination from '@/hooks/usePagination';
 import { Show } from '@onelauncher/common/components';
 import { createFileRoute } from '@tanstack/react-router';
 import { useEffect, useMemo, useState } from 'react';
 import { BrowserLayout } from './route';
-import type { Paginated, SearchResult } from '@/bindings.gen';
-import type { PaginationOptions } from '@/hooks/usePagination';
-import usePagination from '@/hooks/usePagination';
 
 export const Route = createFileRoute('/app/browser/search')({
 	component: RouteComponent,
@@ -33,40 +33,39 @@ function Search() {
 	return (
 		<>
 			{
-			search.data
-				? <Results results={search.data}/>
-				: <h1>Loading</h1>
+				search.data
+					? <Results results={search.data} />
+					: <h1>Loading</h1>
 			}
 		</>
 	);
 }
 
-function Results({results}:{results:Paginated<SearchResult>}){
+function Results({ results }: { results: Paginated<SearchResult> }) {
 	const context = useBrowserContext();
-	const [oldTotal, setOldTotal] = useState(results.total)
+	const [oldTotal, setOldTotal] = useState(results.total);
 	const pagination = usePagination({
 		itemsCount: results.total as unknown as number,
-		itemsPerPage: context.query.limit as unknown as number
-	})
-	useEffect(()=>{
-		context.setQuery({...context.query, offset: pagination.offset as unknown as bigint})
-	},[pagination.page])
-	useEffect(()=>{
-		if(oldTotal === results.total) return;
-		pagination.reset()
-		console.log("pagination reset", results.total)
-		setOldTotal(results.total)
-	},[results.total])
+		itemsPerPage: context.query.limit as unknown as number,
+	});
+	useEffect(() => {
+		context.setQuery({ ...context.query, offset: pagination.offset as unknown as bigint });
+	}, [pagination.page]);
+	useEffect(() => {
+		if (oldTotal === results.total)
+			return;
+		pagination.reset();
+		setOldTotal(results.total);
+	}, [results.total]);
 	return (
 		<div>
-			<div className='w-full flex justify-end my-2'>
-				<pagination.Navigation/>
+			<div className="w-full flex justify-end my-2">
+				<pagination.Navigation />
 			</div>
-			{results.items.length == 0
-			? <h2 className='text-center text-lg font-light italic opacity-60'>No results</h2>
-			: <PackageGrid items={results.items} provider={context.provider}/>
-		}
+			{results.items.length === 0
+				? <h4 className="text-center text-lg font-light opacity-60">No results</h4>
+				: <PackageGrid items={results.items} provider={context.provider} />}
 
 		</div>
-	)
+	);
 }