99 lines
2.9 KiB
TypeScript
99 lines
2.9 KiB
TypeScript
import { Route, Router } from "@solidjs/router";
|
|
import { ThemeProvider } from "@suid/material";
|
|
import {
|
|
Component,
|
|
createRenderEffect,
|
|
createSignal,
|
|
ErrorBoundary,
|
|
lazy,
|
|
onCleanup,
|
|
} from "solid-js";
|
|
import { useRootTheme } from "./material/mui.js";
|
|
import {
|
|
Provider as ClientProvider,
|
|
createMastoClientFor,
|
|
type Session,
|
|
} from "./masto/clients.js";
|
|
import { $accounts } from "./accounts/stores.js";
|
|
import { useStore } from "@nanostores/solid";
|
|
import { DateFnScope, useLanguage } from "./platform/i18n.jsx";
|
|
|
|
const AccountSignIn = lazy(() => import("./accounts/SignIn.js"));
|
|
const AccountMastodonOAuth2Callback = lazy(
|
|
() => import("./accounts/MastodonOAuth2Callback.js"),
|
|
);
|
|
const TimelineHome = lazy(() => import("./timelines/Home.js"));
|
|
const Settings = lazy(() => import("./settings/Settings.js"));
|
|
const TootBottomSheet = lazy(() => import("./timelines/TootBottomSheet.js"));
|
|
const MotionSettings = lazy(() => import("./settings/Motions.js"));
|
|
const LanguageSettings = lazy(() => import("./settings/Language.js"));
|
|
const RegionSettings = lazy(() => import("./settings/Region.jsx"));
|
|
|
|
const Routing: Component = () => {
|
|
return (
|
|
<Router>
|
|
<Route path="/" component={TimelineHome}>
|
|
<Route path=""></Route>
|
|
<Route path="/settings" component={Settings}>
|
|
<Route path=""></Route>
|
|
<Route path="/language" component={LanguageSettings}></Route>
|
|
<Route path="/region" component={RegionSettings}></Route>
|
|
<Route path="/motions" component={MotionSettings}></Route>
|
|
</Route>
|
|
<Route path="/:acct/:id" component={TootBottomSheet}></Route>
|
|
</Route>
|
|
<Route path={"/accounts"}>
|
|
<Route path={"/sign-in"} component={AccountSignIn} />
|
|
<Route
|
|
path={"/oauth2/mastodon"}
|
|
component={AccountMastodonOAuth2Callback}
|
|
/>
|
|
</Route>
|
|
</Router>
|
|
);
|
|
};
|
|
|
|
const App: Component = () => {
|
|
const theme = useRootTheme();
|
|
const accts = useStore($accounts);
|
|
const clientStore = createSignal<Session[]>([]);
|
|
const lang = useLanguage();
|
|
|
|
createRenderEffect(() => {
|
|
const [, setClients] = clientStore;
|
|
setClients(
|
|
accts().map((x) => ({ account: x, client: createMastoClientFor(x) })),
|
|
);
|
|
});
|
|
|
|
createRenderEffect(() => {
|
|
const root = document.querySelector(":root")!;
|
|
root.setAttribute("lang", lang());
|
|
});
|
|
|
|
onCleanup(() => {
|
|
const root = document.querySelector(":root")!;
|
|
root.removeAttribute("lang");
|
|
});
|
|
|
|
const UnexpectedError = lazy(() => import("./UnexpectedError.js"));
|
|
|
|
return (
|
|
<ErrorBoundary
|
|
fallback={(err, reset) => {
|
|
console.error(err);
|
|
return <UnexpectedError error={err} />;
|
|
}}
|
|
>
|
|
<ThemeProvider theme={theme()}>
|
|
<DateFnScope>
|
|
<ClientProvider value={clientStore}>
|
|
<Routing />
|
|
</ClientProvider>
|
|
</DateFnScope>
|
|
</ThemeProvider>
|
|
</ErrorBoundary>
|
|
);
|
|
};
|
|
|
|
export default App;
|