108 lines
4.6 KiB
TypeScript
108 lines
4.6 KiB
TypeScript
import { A, Route, Router, useNavigate } from "@solidjs/router";
|
|
import { createEffect, Show, Suspense, type Component } from "solid-js";
|
|
import { DmId, GroupId, Home, Overview, preloadDmId, Privacy } from "./pages";
|
|
|
|
import "./app.css";
|
|
import { MetaProvider } from "@solidjs/meta";
|
|
import { Portal } from "solid-js/web";
|
|
import { Callout, CalloutTitle, CalloutContent } from "./components/ui/callout";
|
|
import { dbLoaded } from "./db";
|
|
import { hasCashedData } from "./lib/db-cache";
|
|
import { isWasmSupported } from "./lib/utils";
|
|
import { ColorModeProvider, ColorModeScript, createLocalStorageManager } from "@kobalte/core";
|
|
import { ModeToggle } from "./components/ui/mode-toggle";
|
|
|
|
const NO_DATA_NEEDED_PAGES = ["/", "/privacy"];
|
|
|
|
const App: Component = () => {
|
|
const storageManager = createLocalStorageManager("vite-ui-theme");
|
|
return (
|
|
<div class="mx-auto max-w-(--breakpoint-2xl)">
|
|
<MetaProvider>
|
|
<Router
|
|
root={(props) => {
|
|
const navigate = useNavigate();
|
|
|
|
createEffect(() => {
|
|
if (!dbLoaded() && !hasCashedData() && !NO_DATA_NEEDED_PAGES.includes(props.location.pathname)) {
|
|
navigate("/");
|
|
}
|
|
});
|
|
|
|
const wasmSupport = isWasmSupported();
|
|
|
|
return (
|
|
<>
|
|
<ColorModeScript storageType={storageManager.type} />
|
|
<ColorModeProvider storageManager={storageManager}>
|
|
<header class="flex justify-between bg-accent p-4">
|
|
<A class="text-2xl text-content" href="/">
|
|
Signalstats
|
|
</A>
|
|
<ModeToggle />
|
|
</header>
|
|
<Show when={!wasmSupport}>
|
|
<Portal>
|
|
<div class="fixed inset-0 mx-4 flex flex-col items-center justify-center backdrop-blur-lg">
|
|
<Callout variant="error">
|
|
Your browser does not support WebAssembly, which is required for this site to work with the
|
|
big amount of data a signal backup contains.
|
|
<br />
|
|
Please try a different browser.
|
|
</Callout>
|
|
</div>
|
|
</Portal>
|
|
</Show>
|
|
<Show
|
|
when={props.location.pathname !== "/" && !dbLoaded() && hasCashedData()}
|
|
fallback={
|
|
<Show when={!dbLoaded() && hasCashedData()}>
|
|
<Callout variant="default" class="m-4">
|
|
There is currently no backup database loaded, but you can watch statistics that have been
|
|
cached, meaning only chats you already opened or chats that were preloaded.
|
|
<br />
|
|
<A
|
|
href="/overview"
|
|
onClick={() => {
|
|
umami.track("Watch cached statistics");
|
|
}}
|
|
>
|
|
Watch cached statistics
|
|
</A>
|
|
</Callout>
|
|
</Show>
|
|
}
|
|
>
|
|
<Callout variant="warning" class="m-4">
|
|
<CalloutTitle>You are watching cached statistics</CalloutTitle>
|
|
<CalloutContent>
|
|
Currently there is no backup database loaded. You can only watch statistics that have been
|
|
cached, meaning only chats you already opened or chats that were preloaded.
|
|
<br />
|
|
<A href="/">Load a backup</A>
|
|
</CalloutContent>
|
|
</Callout>
|
|
</Show>
|
|
<main class="px-4 md:px-0">
|
|
<Suspense>{props.children}</Suspense>
|
|
</main>
|
|
<footer class="mt-4 flex flex-row justify-end bg-muted p-8">
|
|
<A href="/privacy">Privacy policy</A>
|
|
</footer>
|
|
</ColorModeProvider>
|
|
</>
|
|
);
|
|
}}
|
|
>
|
|
<Route path="/" component={Home} />
|
|
<Route path="/overview" component={Overview} />
|
|
<Route path="/dm/:dmid" component={DmId} preload={preloadDmId} />
|
|
<Route path="/group/:groupid" component={GroupId} />
|
|
<Route path="/privacy" component={Privacy} />{" "}
|
|
</Router>
|
|
</MetaProvider>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default App;
|