From a02ca5c085ca5b1aa668621d2aa975c5f4dc93be Mon Sep 17 00:00:00 2001 From: emirsassan Date: Sun, 13 Jul 2025 11:16:29 +0300 Subject: [PATCH] chore: start working on browser page and ui text size adjustment --- .../frontend/src/components/SettingsRow.tsx | 2 +- .../frontend/src/hooks/useBrowser.tsx | 21 +++ .../frontend/src/routes/app/browser/index.tsx | 48 ++++++- .../frontend/src/routes/app/browser/route.tsx | 120 ++++++++++++++++++ .../src/routes/app/settings/index.tsx | 2 +- .../src/routes/app/settings/route.tsx | 19 ++- apps/onelauncher/frontend/src/utils/index.ts | 2 + packages/web_common/src/theme.css | 10 ++ 8 files changed, 212 insertions(+), 12 deletions(-) create mode 100644 apps/onelauncher/frontend/src/hooks/useBrowser.tsx create mode 100644 apps/onelauncher/frontend/src/routes/app/browser/route.tsx diff --git a/apps/onelauncher/frontend/src/components/SettingsRow.tsx b/apps/onelauncher/frontend/src/components/SettingsRow.tsx index ce336cae..4bfe7435 100644 --- a/apps/onelauncher/frontend/src/components/SettingsRow.tsx +++ b/apps/onelauncher/frontend/src/components/SettingsRow.tsx @@ -21,7 +21,7 @@ function SettingsRow({ disabled, description, icon, title, children }: SettingsR
-

{title}

+

{title}

{description}

diff --git a/apps/onelauncher/frontend/src/hooks/useBrowser.tsx b/apps/onelauncher/frontend/src/hooks/useBrowser.tsx new file mode 100644 index 00000000..5294de7d --- /dev/null +++ b/apps/onelauncher/frontend/src/hooks/useBrowser.tsx @@ -0,0 +1,21 @@ +import type { ClusterModel } from '@/bindings.gen'; +import { createContext } from 'react'; + +export interface BrowserControllerType { + cluster: ClusterModel | undefined; + setCluster: (cluster: ClusterModel | undefined) => void; + + search: () => void; +} + +const browserContext = createContext(null); + +export function BrowserProvider(props: any) { + const { children } = props; + + return ( + + {children} + + ); +} diff --git a/apps/onelauncher/frontend/src/routes/app/browser/index.tsx b/apps/onelauncher/frontend/src/routes/app/browser/index.tsx index 0eb945b3..799f24d6 100644 --- a/apps/onelauncher/frontend/src/routes/app/browser/index.tsx +++ b/apps/onelauncher/frontend/src/routes/app/browser/index.tsx @@ -1,5 +1,8 @@ +import OneConfigLogo from '@/assets/logos/oneconfig.svg'; +import { Button, Show } from '@onelauncher/common/components'; import { createFileRoute } from '@tanstack/react-router'; -import { BracketsEllipsesIcon } from '@untitled-theme/icons-react'; +import { ChevronRightIcon } from '@untitled-theme/icons-react'; +import { BrowserLayout } from './route'; export const Route = createFileRoute('/app/browser/')({ component: RouteComponent, @@ -7,11 +10,44 @@ export const Route = createFileRoute('/app/browser/')({ function RouteComponent() { return ( -
-
- -

WIP

+ +
+
-
+ + ); +} + +function Featured() { + return ( + +
+
Featured
+
+
+ thumbnail +
+
+

Sodium

+ + +
+ OneConfig Logo + OneConfig Integrated +
+ + +

Peak mod

+ +
+ +
+
+
+
+ ); } diff --git a/apps/onelauncher/frontend/src/routes/app/browser/route.tsx b/apps/onelauncher/frontend/src/routes/app/browser/route.tsx new file mode 100644 index 00000000..4f5a3972 --- /dev/null +++ b/apps/onelauncher/frontend/src/routes/app/browser/route.tsx @@ -0,0 +1,120 @@ +import { PROVIDERS } from '@/utils'; +import { Button, Dropdown, Show, TextField } from '@onelauncher/common/components'; +import { createFileRoute, Outlet } from '@tanstack/react-router'; +import { SearchMdIcon } from '@untitled-theme/icons-react'; + +export const Route = createFileRoute('/app/browser')({ + component: RouteComponent, +}); + +function RouteComponent() { + return ( +
+ +
+ ); +} + +export function BrowserLayout(props: any) { + return ( +
+
+
+
+ +
+
+ +
+ + +
+
+ {props.children} +
+
+ + +
+
+
+ ); +} + +function BrowserSidebar() { + return ( +
+
+
+
Active Cluster
+
+
+
Provider
+ + {/* + {provider => ( + + + {provider} + + )} + */} + {PROVIDERS.map(provider => ( + {provider} + ))} + +
+
+
+ ); +} + +function BrowserCategories() { + return ( +
+
+
+ +
+
Categories
+ {/* + {category => ( +

toggleCategory(category.id)} + > + {category.display} +

+ )} + */} +

+ Jennie +

+
+ +
+
+ ); +} + +function BrowserToolbar() { + return ( +
+
+ +
+ } + placeholder="Search for content" + /> +
+
+ ); +} diff --git a/apps/onelauncher/frontend/src/routes/app/settings/index.tsx b/apps/onelauncher/frontend/src/routes/app/settings/index.tsx index f20e4f96..aa737658 100644 --- a/apps/onelauncher/frontend/src/routes/app/settings/index.tsx +++ b/apps/onelauncher/frontend/src/routes/app/settings/index.tsx @@ -32,7 +32,7 @@ function RouteComponent() { return (
-

General Settings

+

General

(
-

{section.toUpperCase()}

+

{section.toUpperCase()}

{links[section].map((link, i) => { // eslint yaps too much tbh @@ -88,7 +99,7 @@ function Sidebar(props: SidebarProps) { return ( goto(link[2], link[3])} diff --git a/apps/onelauncher/frontend/src/utils/index.ts b/apps/onelauncher/frontend/src/utils/index.ts index 86d99b37..a2d9d486 100644 --- a/apps/onelauncher/frontend/src/utils/index.ts +++ b/apps/onelauncher/frontend/src/utils/index.ts @@ -18,6 +18,8 @@ export const LOADERS: Array = [ 'fabric', 'legacyfabric', ] as const; +export const PROVIDERS: Array = ['Modrinth', 'Curseforge', 'SkyClient'] as const; +export const PACKAGE_TYPES: Array = ['mod', 'resourcepack', 'datapack', 'shaderpack'] as const; export function pluralize(n: number, word: string, locale: string = 'en'): string { const pluralRules = new Intl.PluralRules(locale); diff --git a/packages/web_common/src/theme.css b/packages/web_common/src/theme.css index 880e97f7..6d23eac1 100644 --- a/packages/web_common/src/theme.css +++ b/packages/web_common/src/theme.css @@ -110,3 +110,13 @@ body { display: none; } +h1 { @apply text-[2rem] font-semibold; line-height: 1.5 !important; } +h2 { @apply text-[1.5rem] font-semibold; line-height: 1.25 !important; } +h3 { @apply text-[1.25rem] font-medium; } +h4 { @apply text-[1rem] font-medium; } +h5 { @apply text-[0.875rem] text-fg-secondary font-bold uppercase; } +h6 { @apply text-[0.75rem] text-fg-secondary font-medium uppercase; } + +code { + @apply rounded-md bg-component-bg p-2 text-left; +} \ No newline at end of file