metacubexd/src/App.tsx

91 lines
2.6 KiB
TypeScript
Raw Normal View History

import { usePrefersDark } from '@solid-primitives/media'
import { Navigate, Route, Routes, useNavigate } from '@solidjs/router'
import { Show, createEffect, lazy, onMount } from 'solid-js'
import { Toaster } from 'solid-toast'
import { twMerge } from 'tailwind-merge'
import { Header } from '~/components'
2023-09-03 03:36:12 +08:00
import { ROUTES } from '~/constants'
import { I18nProvider, locale } from '~/i18n'
import {
2023-09-08 18:42:15 +08:00
WsMsg,
autoSwitchTheme,
curTheme,
endpoint,
favDayTheme,
favNightTheme,
setCurTheme,
2023-09-08 18:42:15 +08:00
setLatestConnectionMsg,
useTwemoji,
2023-09-08 18:42:15 +08:00
useWsRequest,
} from '~/signals'
2023-08-24 04:20:53 +08:00
const Setup = lazy(() => import('~/pages/Setup'))
const Overview = lazy(() => import('~/pages/Overview'))
const Connections = lazy(() => import('~/pages/Connections'))
const Logs = lazy(() => import('~/pages/Logs'))
const Proxies = lazy(() => import('~/pages/Proxies'))
const Rules = lazy(() => import('~/pages/Rules'))
const Config = lazy(() => import('~/pages/Config'))
const ProtectedResources = () => {
const latestConnectionMsg = useWsRequest<WsMsg>('connections')
createEffect(() => setLatestConnectionMsg(latestConnectionMsg()))
return null
}
2023-08-24 04:20:53 +08:00
export const App = () => {
const navigate = useNavigate()
const prefersDark = usePrefersDark()
2023-09-02 19:06:02 +08:00
createEffect(() => {
if (autoSwitchTheme()) {
setCurTheme(prefersDark() ? favNightTheme() : favDayTheme())
}
})
onMount(() => {
if (!endpoint()) {
2023-09-04 13:08:05 +08:00
navigate(ROUTES.Setup)
2023-08-24 04:20:53 +08:00
}
})
return (
<I18nProvider locale={locale()}>
<div
class={twMerge(
2023-09-23 02:18:57 +08:00
'relative flex h-screen flex-col overscroll-y-none subpixel-antialiased p-safe',
useTwemoji() ? 'font-twemoji' : 'font-no-twemoji',
)}
data-theme={curTheme()}
>
<Header />
<div class="flex-1 overflow-y-auto p-2 sm:p-4">
<Routes>
<Show when={endpoint()}>
<Route path={ROUTES.Overview} component={Overview} />
<Route path={ROUTES.Proxies} component={Proxies} />
<Route path={ROUTES.Rules} component={Rules} />
<Route path={ROUTES.Conns} component={Connections} />
<Route path={ROUTES.Log} component={Logs} />
<Route path={ROUTES.Config} component={Config} />
<Route path="*" element={<Navigate href={ROUTES.Overview} />} />
</Show>
<Route path={endpoint() ? ROUTES.Setup : '*'} component={Setup} />
</Routes>
2023-08-24 04:20:53 +08:00
<Show when={endpoint()}>
<ProtectedResources />
2023-08-24 04:20:53 +08:00
</Show>
</div>
2023-08-24 04:20:53 +08:00
<Toaster position="bottom-center" />
2023-08-24 04:20:53 +08:00
</div>
</I18nProvider>
2023-08-24 04:20:53 +08:00
)
}