From 85443ee5a9982c0da0fb0154f46e5e93ec01134f Mon Sep 17 00:00:00 2001 From: Szedann <65607498+Szedann@users.noreply.github.com> Date: Thu, 17 Jul 2025 20:28:29 +0200 Subject: [PATCH] fix: browser main page --- .../src/components/content/PackageItem.tsx | 72 ++++++++++++ .../frontend/src/routes/app/browser/index.tsx | 111 ++++++------------ .../src/routes/app/browser/search.tsx | 35 ++++++ .../onelauncher/frontend/src/utils/browser.ts | 2 +- 4 files changed, 141 insertions(+), 79 deletions(-) create mode 100644 apps/onelauncher/frontend/src/components/content/PackageItem.tsx create mode 100644 apps/onelauncher/frontend/src/routes/app/browser/search.tsx diff --git a/apps/onelauncher/frontend/src/components/content/PackageItem.tsx b/apps/onelauncher/frontend/src/components/content/PackageItem.tsx new file mode 100644 index 00000000..f974362b --- /dev/null +++ b/apps/onelauncher/frontend/src/components/content/PackageItem.tsx @@ -0,0 +1,72 @@ +import type { Provider, SearchResult } from '@/bindings.gen'; +import { abbreviateNumber } from '@/utils'; +import { Show } from '@onelauncher/common/components'; +import { Download01Icon } from '@untitled-theme/icons-react'; + +export function PackageGrid({ items, provider }: { items: Array; provider: Provider }) { + return ( +
+ {items.map(item => ( + + ))} +
+ ); +} + +export function PackageItem({ provider, ...item }: SearchResult & { provider: Provider }) { + function redirect() { + } + + return ( +
+
+ + )} + when={item.icon_url} + > + {`Icon + {`Icon + +
+
+
+

{item.title}

+

+ By + {' '} + {item.author} + {' '} + on + {' '} + {provider} +

+
+ +

{item.description}

+ +
+ +
+ + {abbreviateNumber(item.downloads)} +
+ +
+
+
+ ); +} diff --git a/apps/onelauncher/frontend/src/routes/app/browser/index.tsx b/apps/onelauncher/frontend/src/routes/app/browser/index.tsx index dd8bedc8..9ca0ce77 100644 --- a/apps/onelauncher/frontend/src/routes/app/browser/index.tsx +++ b/apps/onelauncher/frontend/src/routes/app/browser/index.tsx @@ -1,15 +1,17 @@ -import type { Provider, SearchResult } from '@/bindings.gen'; +import type { Provider } from '@/bindings.gen'; import OneConfigLogo from '@/assets/logos/oneconfig.svg'; +import { PackageGrid } from '@/components/content/PackageItem'; import { useBrowserContext, useBrowserSearch } from '@/hooks/useBrowser'; -import { abbreviateNumber } from '@/utils'; +import { PROVIDERS } from '@/utils'; import { Button, Show } from '@onelauncher/common/components'; -import { createFileRoute, useSearch } from '@tanstack/react-router'; -import { ChevronRightIcon, Download01Icon, HeartIcon } from '@untitled-theme/icons-react'; -import { useEffect } from 'react'; +import { createFileRoute } from '@tanstack/react-router'; +import { ChevronRightIcon } from '@untitled-theme/icons-react'; +import { useState } from 'react'; import { BrowserLayout } from './route'; export const Route = createFileRoute('/app/browser/')({ - component: RouteComponent, + component: RouteComponent + }); function RouteComponent() { @@ -17,7 +19,7 @@ function RouteComponent() {
- +
); @@ -58,85 +60,38 @@ function Featured() { ); } -function Search() { - const context = useBrowserContext(); - const search = useBrowserSearch(context.provider, context.query); - useEffect(() => { - search.refetch(); - }, [context.provider, context.query]); - +function Lists() { return ( -
- - {search.data?.items.map(item => ( - - ))} - +
+ {PROVIDERS.map(provider => ( + + ))}
); } -function PackageItem(props: SearchResult & { provider: Provider }) { - function redirect() { - } - +function List({ provider }: { provider: Provider }) { + const search = useBrowserSearch(provider, { + filters: null, + limit: 18 as unknown as bigint, + offset: null, + query: null, + sort: null, + }); + const [expanded, setExpanded] = useState(false); return ( -
-
- - )} - when={props.icon_url} - > - {`Icon - {`Icon +
+

{provider}

+
+ {search.isSuccess + ? + :

Loading...

} + +
+ +
-
-
-

{props.title}

-

- By - {' '} - {props.author} - {' '} - on - {' '} - {props.provider} -

-
- -

{props.description}

- -
- -
- - {abbreviateNumber(props.downloads)} -
- - {/* 0}> -
- - {abbreviateNumber(props.follows)} -
- */} - -
-
); } diff --git a/apps/onelauncher/frontend/src/routes/app/browser/search.tsx b/apps/onelauncher/frontend/src/routes/app/browser/search.tsx new file mode 100644 index 00000000..aec3657f --- /dev/null +++ b/apps/onelauncher/frontend/src/routes/app/browser/search.tsx @@ -0,0 +1,35 @@ +import { PackageGrid } from '@/components/content/PackageItem'; +import { useBrowserContext, useBrowserSearch } from '@/hooks/useBrowser'; +import { Show } from '@onelauncher/common/components'; +import { createFileRoute } from '@tanstack/react-router'; +import { useEffect } from 'react'; +import { BrowserLayout } from './route'; + +export const Route = createFileRoute('/app/browser/search')({ + component: RouteComponent, +}); + +function RouteComponent() { + return ( + +
+ +
+ + ); +} + +function Search() { + const context = useBrowserContext(); + const search = useBrowserSearch(context.provider, context.query, { + }); + useEffect(() => { + search.refetch(); + }, [context.provider, context.query]); + + return ( + + + + ); +} diff --git a/apps/onelauncher/frontend/src/utils/browser.ts b/apps/onelauncher/frontend/src/utils/browser.ts index 375db1d3..b32f8c6f 100644 --- a/apps/onelauncher/frontend/src/utils/browser.ts +++ b/apps/onelauncher/frontend/src/utils/browser.ts @@ -6,7 +6,7 @@ export interface CategoryItem { } export const browserCategories = { - byPackageType(packageType: 'mod' | string, provider: string): Array { + byPackageType(packageType: 'mod' | string & {}, provider: string): Array { switch (packageType) { case 'mod': return this.mod(provider);