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

chore: start working on browser page and ui text size adjustment

Browse source
This commit is contained in:
emirsassan 2025-07-13 11:16:29 +03:00
parent 6fdd5e678f
commit a02ca5c085
8 changed files with 212 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/onelauncher/frontend/src/components/SettingsRow.tsx
View file

@ -21,7 +21,7 @@ function SettingsRow({ disabled, description, icon, title, children }: SettingsR
</div>
<div className="flex flex-1 flex-col gap-2">
<h3 className="text-lg capitalize leading-tight">{title}</h3>
<p className="text-lg capitalize leading-tight">{title}</p>
<p className="text-sm text-fg-secondary">{description}</p>
</div>

21
apps/onelauncher/frontend/src/hooks/useBrowser.tsx Normal file
View file

@ -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<BrowserControllerType | null>(null);
export function BrowserProvider(props: any) {
const { children } = props;
return (
<browserContext.Provider value={browserContext}>
{children}
</browserContext.Provider>
);
}

48
apps/onelauncher/frontend/src/routes/app/browser/index.tsx
View file

@ -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 (
<div>
<div className="flex flex-col items-center justify-center h-full">
<BracketsEllipsesIcon className="size-40" />
<h3 className="text-xl">WIP</h3>
<BrowserLayout>
<div className="flex flex-col gap-8">
<Featured />
</div>
</div>
</BrowserLayout>
);
}
function Featured() {
return (
<Show when>
<div className="flex flex-col gap-y-1">
<h5 className="ml-2">Featured</h5>
<div className="w-full flex flex-row overflow-hidden rounded-lg bg-page-elevated">
<div className="w-full p-1">
<img alt="thumbnail" className="aspect-ratio-video h-full rounded-md object-cover object-center" src="https://cdn.modrinth.com/data/AANobbMI/295862f4724dc3f78df3447ad6072b2dcd3ef0c9_96.webp" />
</div>
<div className="max-w-84 min-w-52 flex flex-col gap-y-1 p-4">
<h2>Sodium</h2>
<Show when={false}>
<div className="w-fit flex flex-row items-center gap-x-1 rounded-lg bg-border/10 px-1.5 py-1 text-fg-primary transition hover:opacity-80">
<img alt="OneConfig Logo" className="h-3.5 w-3.5" src={OneConfigLogo} />
<span className="text-sm font-medium">OneConfig Integrated</span>
</div>
</Show>
<p className="mt-1 flex-1 leading-normal">Peak mod</p>
<div className="flex flex-row justify-end">
<Button color="ghost">
View Package
<ChevronRightIcon />
</Button>
</div>
</div>
</div>
</div>
</Show>
);
}

120
apps/onelauncher/frontend/src/routes/app/browser/route.tsx Normal file
View file

@ -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 (
<div>
<Outlet />
</div>
);
}
export function BrowserLayout(props: any) {
return (
<div className="relative h-full flex flex-1 flex-col items-center gap-2">
<div className="h-full w-full max-w-screen-xl flex flex-1 flex-col items-center gap-y-2">
<div className="grid grid-cols-[220px_auto_220px] w-full gap-x-6">
<div />
<BrowserToolbar />
<div />
</div>
<div className="grid grid-cols-[220px_auto_220px] w-full max-w-screen-xl gap-x-6 pb-8">
<BrowserCategories />
<div className="h-full flex flex-col gap-y-4">
<div className="h-full flex-1">
{props.children}
</div>
</div>
<BrowserSidebar />
</div>
</div>
</div>
);
}
function BrowserSidebar() {
return (
<div className="flex flex-col gap-y-4">
<div className="flex flex-col gap-y-4">
<div className="flex flex-col gap-y-1">
<h6 className="my-1">Active Cluster</h6>
<Button
children="None"
className="h-9.5"
color="secondary"
/>
</div>
<div className="flex flex-col gap-y-1">
<h6 className="my-1">Provider</h6>
<Dropdown>
{/* <For each={PROVIDERS}>
{provider => (
<Dropdown.Row>
<ProviderIcon class="h-4 w-4" provider={provider} />
{provider}
</Dropdown.Row>
)}
</For> */}
{PROVIDERS.map(provider => (
<Dropdown.Item key={provider}>{provider}</Dropdown.Item>
))}
</Dropdown>
</div>
</div>
</div>
);
}
function BrowserCategories() {
return (
<div className="top-0 grid grid-cols-[1fr_auto] h-fit min-w-50 gap-y-6">
<div />
<div className="flex flex-col gap-y-6">
<Show when>
<div className="flex flex-col gap-y-2">
<h6 className="my-1">Categories</h6>
{/* <For each={categories()}>
{category => (
<p
class={`text-md capitalize text-fg-primary hover:text-fg-primary-hover line-height-snug ${isEnabled(category.id) ? 'text-opacity-100! hover:text-opacity-90!' : 'text-opacity-60! hover:text-opacity-70!'}`}
onClick={() => toggleCategory(category.id)}
>
{category.display}
</p>
)}
</For> */}
<p
className="text-md capitalize opacity-100 hover:opacity-90 text-fg-primary hover:text-fg-primary-hover"
>
Jennie
</p>
</div>
</Show>
</div>
</div>
);
}
function BrowserToolbar() {
return (
<div className="w-full flex flex-row justify-between bg-page">
<div className="flex flex-row gap-2" />
<div className="flex flex-row gap-2">
<TextField
iconLeft={<SearchMdIcon />}
placeholder="Search for content"
/>
</div>
</div>
);
}

2
apps/onelauncher/frontend/src/routes/app/settings/index.tsx
View file

@ -32,7 +32,7 @@ function RouteComponent() {
return (
<Sidebar.Page>
<div className="h-full">
<h1>General Settings</h1>
<h1>General</h1>
<SettingsRow
description="Enable Discord Rich Presence."

19
apps/onelauncher/frontend/src/routes/app/settings/route.tsx
View file

@ -69,8 +69,19 @@ function Sidebar(props: SidebarProps) {
navigate({ to: url });
}
function isActive(link: string, _params: URLSearchParams | undefined) {
return location === `${base}${link}` || `${location}/` === `${base}${link}`;
function isActive(link: string, params: URLSearchParams | undefined) {
const fullBasePath = `${base}${link}`;
const pathnameMatch = location.startsWith(fullBasePath) || `${location}/`.startsWith(fullBasePath);
if (!params)
return pathnameMatch;
const searchParams = new URLSearchParams(routerState.location.searchStr);
for (const [key, value] of params)
if (searchParams.get(key) !== value)
return false;
return pathnameMatch;
}
return (
@ -78,7 +89,7 @@ function Sidebar(props: SidebarProps) {
{Object.keys(links).map((section, i) => (
<div className="flex flex-col gap-y-2" key={i}>
<div>
<h3 className="m-1.5 mt-5 text-xs text-fg-secondary font-medium">{section.toUpperCase()}</h3>
<p className="m-1.5 mt-5 text-xs text-fg-secondary font-medium">{section.toUpperCase()}</p>
<div className="flex flex-col gap-y-1 fill-fg-primary text-fg-primary font-medium">
{links[section].map((link, i) => {
// eslint yaps too much tbh
@ -88,7 +99,7 @@ function Sidebar(props: SidebarProps) {
return (
<a
className={
`px-3 py-1 rounded-md text-md border border-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed ${isActive(link[2], link[3]) ? 'bg-component-bg border-border/05' : 'border-transparent'}`
`px-3 py-1 rounded-md text-md border hover:bg-component-bg-hover active:bg-component-bg-pressed ${isActive(link[2], link[3]) ? 'bg-component-bg border-component-bg-pressed' : 'border-transparent'}`
}
key={i}
onClick={() => goto(link[2], link[3])}

2
apps/onelauncher/frontend/src/utils/index.ts
View file

@ -18,6 +18,8 @@ export const LOADERS: Array<string> = [
'fabric',
'legacyfabric',
] as const;
export const PROVIDERS: Array<string> = ['Modrinth', 'Curseforge', 'SkyClient'] as const;
export const PACKAGE_TYPES: Array<string> = ['mod', 'resourcepack', 'datapack', 'shaderpack'] as const;
export function pluralize(n: number, word: string, locale: string = 'en'): string {
const pluralRules = new Intl.PluralRules(locale);

10
packages/web_common/src/theme.css
View file

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