From d3b397662f169e83feb300a84bf6f88828b70500 Mon Sep 17 00:00:00 2001 From: Szedann <65607498+Szedann@users.noreply.github.com> Date: Tue, 22 Jul 2025 19:22:31 +0200 Subject: [PATCH] feat: more screen more packages --- .../src/components/content/PackageItem.tsx | 2 +- .../frontend/src/routes/app/browser/index.tsx | 2 +- .../app/browser/package.$provider.$slug.tsx | 157 ++++++++++-------- .../frontend/src/routes/app/browser/route.tsx | 4 +- 4 files changed, 91 insertions(+), 74 deletions(-) diff --git a/apps/onelauncher/frontend/src/components/content/PackageItem.tsx b/apps/onelauncher/frontend/src/components/content/PackageItem.tsx index ef7c9acf..d6be3924 100644 --- a/apps/onelauncher/frontend/src/components/content/PackageItem.tsx +++ b/apps/onelauncher/frontend/src/components/content/PackageItem.tsx @@ -13,7 +13,7 @@ function includes(list: { includes: (arg0: TArray) => boole export function PackageGrid({ items, provider }: { items: Array; provider: Provider }) { return ( -
+
{items.map(item => ( ))} diff --git a/apps/onelauncher/frontend/src/routes/app/browser/index.tsx b/apps/onelauncher/frontend/src/routes/app/browser/index.tsx index f376a604..e1e7422d 100644 --- a/apps/onelauncher/frontend/src/routes/app/browser/index.tsx +++ b/apps/onelauncher/frontend/src/routes/app/browser/index.tsx @@ -40,7 +40,7 @@ function Featured() {
thumbnail
-
+

{featuredPackage.data?.name}

diff --git a/apps/onelauncher/frontend/src/routes/app/browser/package.$provider.$slug.tsx b/apps/onelauncher/frontend/src/routes/app/browser/package.$provider.$slug.tsx index e6a763b2..3c6e3469 100644 --- a/apps/onelauncher/frontend/src/routes/app/browser/package.$provider.$slug.tsx +++ b/apps/onelauncher/frontend/src/routes/app/browser/package.$provider.$slug.tsx @@ -3,6 +3,7 @@ import type { HTMLProps } from 'react'; import Modal from '@/components/overlay/Modal'; import { useBrowserContext, usePackageData, usePackageVersions } from '@/hooks/useBrowser'; import { ChooseClusterModal, useClusters } from '@/hooks/useCluster'; +import usePagination from '@/hooks/usePagination'; import { bindings } from '@/main'; import { abbreviateNumber, formatAsRelative, PROVIDERS, upperFirst } from '@/utils'; import { useCommand } from '@onelauncher/common'; @@ -16,7 +17,6 @@ import Markdown from 'react-markdown'; import rehypeRaw from 'rehype-raw'; import remarkGfm from 'remark-gfm'; import { twMerge } from 'tailwind-merge'; -import usePagination from '@/hooks/usePagination'; export const Route = createFileRoute('/app/browser/package/$provider/$slug')({ component: RouteComponent, @@ -26,10 +26,10 @@ function includes(list: { includes: (arg0: TArray) => boole return list.includes(element as unknown as TArray); } -function CustomA({ href, children, includeIcon, className, ...rest }: { href: string; children: any, includeIcon?: boolean } & HTMLProps) { +function CustomA({ href, children, includeIcon, className, ...rest }: { href: string; children: any; includeIcon?: boolean } & HTMLProps) { return ( { e.preventDefault(); @@ -38,7 +38,7 @@ function CustomA({ href, children, includeIcon, className, ...rest }: { href: st {...rest} > {children} - {includeIcon && } + {includeIcon && } ); } @@ -56,7 +56,6 @@ function RouteComponent() { if (!includes(PROVIDERS, provider)) throw new Error('Invalid provider'); const packageData = usePackageData(provider, slug, {}); - const browserContext = useBrowserContext(); return ( @@ -84,14 +83,14 @@ function RouteComponent() {
- + {packageData.data?.gallery.map(item => ( -
+
{item.title &&
{item.title}
}
@@ -113,9 +112,9 @@ function RouteComponent() { function getPackageUrl(pkg: ManagedPackage): string { switch (pkg.provider) { - case 'Modrinth': return `https://modrinth.com/project/${pkg.slug}` - case 'Curseforge': return `https://www.curseforge.com/minecraft/${pkg.package_type}s/${pkg.slug}` - case 'SkyClient': return `` + case 'Modrinth': return `https://modrinth.com/project/${pkg.slug}`; + case 'Curseforge': return `https://www.curseforge.com/minecraft/${pkg.package_type}s/${pkg.slug}`; + case 'SkyClient': return ``; } } @@ -163,18 +162,32 @@ function BrowserSidebar({ package: pkg }: { package: ManagedPackage }) {

Links

-
- +
+ {provider} {' '} Page - {(Object.entries(pkg.links) as [keyof typeof pkg.links, typeof pkg.links[keyof typeof pkg.links]][]).filter(a => a[1]).map(link => - typeof link[1] == "string" - ? - : (link[1] as PackageDonationUrl[]).map(donationLink => ) - - )} + {(Object.entries(pkg.links) as Array<[keyof typeof pkg.links, typeof pkg.links[keyof typeof pkg.links]]>).filter(a => a[1]).map(link => + typeof link[1] == 'string' + ? ( + + ) + : (link[1] as Array).map(donationLink => ( + + )))}
@@ -232,19 +245,20 @@ function BrowserSidebar({ package: pkg }: { package: ManagedPackage }) { function InstallButton() { const triggerRef = useRef(null); const { provider, slug } = Route.useParams(); - if(!includes(PROVIDERS, provider)) throw new Error("invalid provider") + if (!includes(PROVIDERS, provider)) + throw new Error('invalid provider'); const [open, setOpen] = useState(false); const clusters = useClusters(); const browserContext = useBrowserContext(); const { data: versions } = usePackageVersions(provider, slug, { mc_versions: browserContext.cluster ? [browserContext.cluster.mc_version] : [], loaders: browserContext.cluster ? [browserContext.cluster.mc_loader] : [], - limit: 1 + limit: 1, }); const version = useMemo(() => { if (!versions || !browserContext.cluster) return undefined; - return versions.items[0] + return versions.items[0]; }, [browserContext.cluster, versions]); function download() { @@ -268,12 +282,12 @@ function InstallButton() { browserContext.cluster ? version ? ( - - Download latest to -
- {browserContext.cluster.name} - - ) + + Download latest to +
+ {browserContext.cluster.name} + + ) : `No matching version found` : 'Select a Cluster' } @@ -359,50 +373,53 @@ function colorForType(type: string) { } } -function Versions(){ - const {provider, slug} = Route.useParams() - if(!includes(PROVIDERS, provider)) throw new Error("invalid provider") - const [offset, setOffset] = useState(0) +function Versions() { + const { provider, slug } = Route.useParams(); + if (!includes(PROVIDERS, provider)) + throw new Error('invalid provider'); + const [offset, setOffset] = useState(0); const { data: versions } = usePackageVersions(provider, slug, { limit: 20, - offset + offset, }); const pagination = usePagination({ itemsCount: versions?.total as unknown as number, - itemsPerPage: versions?.limit as unknown as number - }) - useEffect(()=>{ - setOffset(pagination.offset) - },[pagination.offset]) - useEffect(()=>{ - pagination.reset() - },[versions?.total]) - return
-
- + itemsPerPage: versions?.limit as unknown as number, + }); + useEffect(() => { + setOffset(pagination.offset); + }, [pagination.offset]); + useEffect(() => { + pagination.reset(); + }, [versions?.total]); + return ( +
+
+ +
+ + + + Name + Game Versions + Loaders + Created + Downloads + + + + {versions?.items.map(item => + )} + +
- - - - Name - Game Versions - Loaders - Created - Downloads - - - - {versions?.items.map(item=> - - )} - -
-
+ ); } -function VersionRow({version}:{version:ManagedVersion}){ - const {provider} = Route.useParams() - if(!includes(PROVIDERS, provider)) throw new Error("invalid provider") +function VersionRow({ version }: { version: ManagedVersion }) { + const { provider } = Route.useParams(); + if (!includes(PROVIDERS, provider)) + throw new Error('invalid provider'); return ( @@ -413,22 +430,22 @@ function VersionRow({version}:{version:ManagedVersion}){ {version.display_name} - {version.mc_versions.join(", ")} - {version.loaders.map(upperFirst).join(", ")} + {version.mc_versions.join(', ')} + {version.loaders.map(upperFirst).join(', ')} {formatAsRelative(Date.parse(version.published))} {version.downloads} -