feat: Start work on settings

This commit is contained in:
LynithDev 2024-05-16 12:29:36 +02:00
parent 0843162d69
commit a970ed27a5
8 changed files with 126 additions and 13 deletions

View file

@ -8,11 +8,8 @@ import App from './ui/App';
import HomePage from './ui/pages/Home';
import BrowserPage from './ui/pages/Browser';
import UpdatesPage from './ui/pages/Updates';
import ClusterOverview from './ui/pages/cluster/ClusterOverview';
import ClusterMods from './ui/pages/cluster/ClusterMods';
import ClusterRoot from '~ui/pages/cluster/ClusterRoot';
import ClusterLogs from '~ui/pages/cluster/ClusterLogs';
import ClusterScreenshots from '~ui/pages/cluster/ClusterScreenshots';
import SettingsRoot from '~ui/pages/settings/SettingsRoot';
render(() => (
<Router root={App}>
@ -20,10 +17,10 @@ render(() => (
<Route path="/browser" component={BrowserPage} />
<Route path="/updates" component={UpdatesPage} />
<Route path="/clusters" component={ClusterRoot}>
<Route path="/" component={ClusterOverview} />
<Route path="/logs" component={ClusterLogs} />
<Route path="/mods" component={ClusterMods} />
<Route path="/screenshots" component={ClusterScreenshots} />
<ClusterRoot.Routes />
</Route>
<Route path="/settings" component={SettingsRoot}>
<SettingsRoot.Routes />
</Route>
</Router>
), document.getElementById('root') as HTMLElement);

View file

@ -1,7 +1,8 @@
import { A } from '@solidjs/router';
import { A, useNavigate } from '@solidjs/router';
import { createSignal } from 'solid-js';
import { Bell01Icon, Cloud01Icon, Settings01Icon, TerminalBrowserIcon } from '@untitled-theme/icons-solid';
import { open } from '@tauri-apps/plugin-shell';
import { WEBSITE } from '@onelauncher/client';
import useAccount from '../hooks/useAccount';
import PolyfrostFull from './logos/PolyfrostFull';
import AccountPopup from './overlay/AccountPopup';
@ -9,7 +10,6 @@ import PlayerHead from './game/PlayerHead';
import Button from './base/Button';
import NotificationPopup from './overlay/notifications/NotificationPopup';
import Popup from './overlay/Popup';
import { WEBSITE } from '~constants';
interface NavbarLinkProps {
path: string;
@ -33,6 +33,7 @@ function NavbarLink(props: NavbarLinkProps) {
function Navbar() {
const [profileMenuOpen, setProfileMenuOpen] = createSignal(false);
const [notificationMenuOpen, setNotificationMenuOpen] = createSignal(false);
const navigate = useNavigate();
const account = useAccount();
@ -71,7 +72,7 @@ function Navbar() {
</Button>
{/* Launcher Settings Button */}
<Button buttonStyle="icon">
<Button buttonStyle="icon" onClick={() => navigate('/settings')}>
<Settings01Icon />
</Button>

View file

@ -32,7 +32,7 @@ function Sidebar(props: SidebarProps) {
}
function isActive(link: string) {
return location.pathname === `${props.base}${link}`;
return location.pathname === `${props.base}${link}` || `${location.pathname}/` === `${props.base}${link}`;
}
return (

View file

@ -1,9 +1,24 @@
import { useSearchParams } from '@solidjs/router';
import { Route, useSearchParams } from '@solidjs/router';
import type { ParentProps } from 'solid-js';
import { EyeIcon, File06Icon, Globe04Icon, Image03Icon, PackagePlusIcon, Settings04Icon, Tool02Icon } from '@untitled-theme/icons-solid';
import Sidebar from '../../components/Sidebar';
import AnimatedRoutes from '../../components/AnimatedRoutes';
import ErrorBoundary from '../../components/ErrorBoundary';
import ClusterOverview from './ClusterOverview';
import ClusterLogs from './ClusterLogs';
import ClusterMods from './ClusterMods';
import ClusterScreenshots from './ClusterScreenshots';
function ClusterRoutes() {
return (
<>
<Route path="/" component={ClusterOverview} />
<Route path="/logs" component={ClusterLogs} />
<Route path="/mods" component={ClusterMods} />
<Route path="/screenshots" component={ClusterScreenshots} />
</>
);
}
function ClusterRoot(props: ParentProps) {
const [searchParams] = useSearchParams();
@ -42,4 +57,6 @@ function ClusterRoot(props: ParentProps) {
);
}
ClusterRoot.Routes = ClusterRoutes;
export default ClusterRoot;

View file

@ -0,0 +1,59 @@
import type { ParentProps } from 'solid-js';
import { Brush01Icon, CodeSnippet02Icon, Globe01Icon, Key01Icon, MessageTextSquare01Icon, RefreshCcw02Icon, Rocket02Icon, Sliders04Icon, Users01Icon } from '@untitled-theme/icons-solid';
import { Route } from '@solidjs/router';
import Sidebar from '../../components/Sidebar';
import SettingsGeneral from './launcher/SettingsGeneral';
import SettingsAppearance from './launcher/SettingsAppearance';
import AnimatedRoutes from '~ui/components/AnimatedRoutes';
import ErrorBoundary from '~ui/components/ErrorBoundary';
function SettingsRoutes() {
return (
<>
<Route path="/" component={SettingsGeneral} />
<Route path="/appearance" component={SettingsAppearance} />
</>
);
}
function SettingsRoot(props: ParentProps) {
return (
<div class="flex flex-row flex-1 h-full gap-x-7">
<div class="mt-8">
<Sidebar
base="/settings"
state={{}}
links={{
'Launcher Settings': [
[<Rocket02Icon />, 'General', '/'],
[<Brush01Icon />, 'Appearance', '/appearance'],
[<Key01Icon />, 'APIs', '/apis'],
[<Globe01Icon />, 'Language', '/language'],
],
'Game Settings': [
[<Sliders04Icon />, 'Minecraft settings', '/minecraft'],
[<Users01Icon />, 'Accounts', '/accounts'],
],
'About': [
[<CodeSnippet02Icon />, 'Developer Options', '/developer'],
[<RefreshCcw02Icon />, 'Changelog', '/changelog'],
[<MessageTextSquare01Icon />, 'Feedback', '/feedback'],
],
}}
/>
</div>
<div class="flex flex-col w-full h-full">
<AnimatedRoutes>
<ErrorBoundary>
{props.children}
</ErrorBoundary>
</AnimatedRoutes>
</div>
</div>
);
}
SettingsRoot.Routes = SettingsRoutes;
export default SettingsRoot;

View file

@ -0,0 +1,9 @@
function SettingsAppearance() {
return (
<div>
<h1>Appearance</h1>
</div>
);
}
export default SettingsAppearance;

View file

@ -0,0 +1,9 @@
function SettingsGeneral() {
return (
<div>
<h1>General</h1>
</div>
);
}
export default SettingsGeneral;

21
pnpm-lock.yaml generated
View file

@ -47,6 +47,9 @@ importers:
'@rspc/client':
specifier: ^0.2.0
version: 0.2.0
'@rspc/solid':
specifier: ^0.2.0
version: 0.2.0(@tanstack/solid-query@5.36.0(solid-js@1.8.17))(solid-js@1.8.17)
'@rspc/tauri':
specifier: ^0.2.0
version: 0.2.0(@tauri-apps/api@2.0.0-beta.8)
@ -83,6 +86,9 @@ importers:
'@rspc/client':
specifier: ^0.2.0
version: 0.2.0
'@rspc/solid':
specifier: ^0.2.0
version: 0.2.0(@tanstack/solid-query@5.36.0(solid-js@1.8.17))(solid-js@1.8.17)
'@rspc/tauri':
specifier: ^0.2.0
version: 0.2.0(@tauri-apps/api@2.0.0-beta.8)
@ -92,6 +98,9 @@ importers:
'@solidjs/router':
specifier: ^0.13.3
version: 0.13.3(solid-js@1.8.17)
'@tanstack/solid-query':
specifier: ^5.36.0
version: 5.36.0(solid-js@1.8.17)
'@tauri-apps/api':
specifier: ^2.0.0-beta
version: 2.0.0-beta.8
@ -786,6 +795,12 @@ packages:
'@rspc/client@0.2.0':
resolution: {integrity: sha512-IIOfAk4g+bzbfr3cmvm42EocsjtzMO9CRCc95ZMx9mFh5ixHzP4Na1lun+KipGzsFV1QsmV6uYSBg/4Kpnu9iA==}
'@rspc/solid@0.2.0':
resolution: {integrity: sha512-6w7kSn3ZeSikUNI5niE+HszTA6mDMIOglhg92BdKOKw7YeuC0b11k9gAXNq1tyOVsn8KGKlkFgPr5iOP4G0k2A==}
peerDependencies:
'@tanstack/solid-query': ^5.0.0
solid-js: ^1.0.0
'@rspc/tauri@0.2.0':
resolution: {integrity: sha512-YULpKSCV/YZLtDRs/poiq3PVW54vMJjIbFZ8PgG+sdyZcujRudpza7xaLrfAHfbo61XdQYz/HP5j/9s5uqXQrA==}
peerDependencies:
@ -3989,6 +4004,12 @@ snapshots:
'@rspc/client@0.2.0': {}
'@rspc/solid@0.2.0(@tanstack/solid-query@5.36.0(solid-js@1.8.17))(solid-js@1.8.17)':
dependencies:
'@rspc/client': 0.2.0
'@tanstack/solid-query': 5.36.0(solid-js@1.8.17)
solid-js: 1.8.17
'@rspc/tauri@0.2.0(@tauri-apps/api@2.0.0-beta.8)':
dependencies:
'@rspc/client': 0.2.0