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

feat: packageitem loader icons (WIP)

Browse source
This commit is contained in:
Szedann 2025-07-20 18:07:19 +02:00
parent 52a8382fcd
commit eb81d24794
2 changed files with 34 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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">

51
apps/onelauncher/frontend/src/routes/app/browser/search.tsx
View file

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