public: new page and copy improvements

This commit is contained in:
Carl-Gerhard Lindesvärd
2026-02-17 00:16:08 +01:00
parent 0ebe2768be
commit e3faab7588
22 changed files with 1026 additions and 352 deletions

View File

@@ -1,17 +1,18 @@
import {
createRootRouteWithContext,
HeadContent,
Scripts,
createRootRouteWithContext,
} from '@tanstack/react-router';
import 'flag-icons/css/flag-icons.min.css';
import 'katex/dist/katex.min.css';
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';
import appCss from '../styles.css?url';
import type { AppRouter } from '@openpanel/trpc';
import type { QueryClient } from '@tanstack/react-query';
import type { TRPCOptionsProxy } from '@trpc/tanstack-react-query';
import appCss from '../styles.css?url';
import type { ConfigResonse } from './api/config';
import { FullPageErrorState } from '@/components/full-page-error-state';
import FullPageLoadingState from '@/components/full-page-loading-state';
import { Providers } from '@/components/providers';
@@ -20,27 +21,21 @@ import { LinkButton } from '@/components/ui/button';
import { getCookiesFn } from '@/hooks/use-cookie-store';
import { useSessionExtension } from '@/hooks/use-session-extension';
import { op } from '@/utils/op';
import type { AppRouter } from '@openpanel/trpc';
import type { TRPCOptionsProxy } from '@trpc/tanstack-react-query';
if (import.meta.env.VITE_OP_CLIENT_ID) {
op.init();
}
interface MyRouterContext {
interface MyRouterContext extends ConfigResonse {
queryClient: QueryClient;
trpc: TRPCOptionsProxy<AppRouter>;
apiUrl: string;
dashboardUrl: string;
isSelfHosted: boolean;
isMaintenance: boolean;
}
export const Route = createRootRouteWithContext<MyRouterContext>()({
beforeLoad: async ({ context }) => {
const [session, cookies] = await Promise.all([
context.queryClient.ensureQueryData(
context.trpc.auth.session.queryOptions(),
context.trpc.auth.session.queryOptions()
),
getCookiesFn().catch(() => ({}) as Record<string, string>),
]);
@@ -68,8 +63,8 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
shellComponent: RootDocument,
errorComponent: ({ error }) => (
<FullPageErrorState
title={'Something went wrong'}
description={error.message}
title={'Something went wrong'}
>
<LinkButton href="/">Go back to home</LinkButton>
</FullPageErrorState>
@@ -85,7 +80,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
<head>
<HeadContent />
</head>
<body className="grainy min-h-screen bg-def-100 font-sans text-base antialiased leading-normal">
<body className="grainy min-h-screen bg-def-100 font-sans text-base leading-normal antialiased">
<Providers>{children}</Providers>
<ThemeScriptOnce />
<Scripts />
@@ -100,150 +95,150 @@ function RootDocument({ children }: { children: React.ReactNode }) {
}}
/>
<div className="hidden">
<div className="text-chart-0 bg-chart-0" />
<div className="text-chart-1 bg-chart-1" />
<div className="text-chart-2 bg-chart-2" />
<div className="text-chart-3 bg-chart-3" />
<div className="text-chart-4 bg-chart-4" />
<div className="text-chart-5 bg-chart-5" />
<div className="text-chart-6 bg-chart-6" />
<div className="text-chart-7 bg-chart-7" />
<div className="text-chart-8 bg-chart-8" />
<div className="text-chart-9 bg-chart-9" />
<div className="text-chart-10 bg-chart-10" />
<div className="text-chart-11 bg-chart-11" />
<div className="text-rose-50 bg-rose-50 hover:bg-rose-50 border-rose-50 dark:bg-rose-50 dark:hover:bg-rose-50" />
<div className="text-rose-100 bg-rose-100 hover:bg-rose-100 border-rose-100 dark:bg-rose-100 dark:hover:bg-rose-100" />
<div className="text-rose-200 bg-rose-200 hover:bg-rose-200 border-rose-200 dark:bg-rose-200 dark:hover:bg-rose-200" />
<div className="text-rose-700 bg-rose-700 hover:bg-rose-700 border-rose-700 dark:bg-rose-700 dark:hover:bg-rose-700" />
<div className="text-rose-800 bg-rose-800 hover:bg-rose-800 border-rose-800 dark:bg-rose-800 dark:hover:bg-rose-800" />
<div className="text-rose-900 bg-rose-900 hover:bg-rose-900 border-rose-900 dark:bg-rose-900 dark:hover:bg-rose-900" />
<div className="text-pink-50 bg-pink-50 hover:bg-pink-50 border-pink-50 dark:bg-pink-50 dark:hover:bg-pink-50" />
<div className="text-pink-100 bg-pink-100 hover:bg-pink-100 border-pink-100 dark:bg-pink-100 dark:hover:bg-pink-100" />
<div className="text-pink-200 bg-pink-200 hover:bg-pink-200 border-pink-200 dark:bg-pink-200 dark:hover:bg-pink-200" />
<div className="text-pink-700 bg-pink-700 hover:bg-pink-700 border-pink-700 dark:bg-pink-700 dark:hover:bg-pink-700" />
<div className="text-pink-800 bg-pink-800 hover:bg-pink-800 border-pink-800 dark:bg-pink-800 dark:hover:bg-pink-800" />
<div className="text-pink-900 bg-pink-900 hover:bg-pink-900 border-pink-900 dark:bg-pink-900 dark:hover:bg-pink-900" />
<div className="text-fuchsia-50 bg-fuchsia-50 hover:bg-fuchsia-50 border-fuchsia-50 dark:bg-fuchsia-50 dark:hover:bg-fuchsia-50" />
<div className="text-fuchsia-100 bg-fuchsia-100 hover:bg-fuchsia-100 border-fuchsia-100 dark:bg-fuchsia-100 dark:hover:bg-fuchsia-100" />
<div className="text-fuchsia-200 bg-fuchsia-200 hover:bg-fuchsia-200 border-fuchsia-200 dark:bg-fuchsia-200 dark:hover:bg-fuchsia-200" />
<div className="text-fuchsia-700 bg-fuchsia-700 hover:bg-fuchsia-700 border-fuchsia-700 dark:bg-fuchsia-700 dark:hover:bg-fuchsia-700" />
<div className="text-fuchsia-800 bg-fuchsia-800 hover:bg-fuchsia-800 border-fuchsia-800 dark:bg-fuchsia-800 dark:hover:bg-fuchsia-800" />
<div className="text-fuchsia-900 bg-fuchsia-900 hover:bg-fuchsia-900 border-fuchsia-900 dark:bg-fuchsia-900 dark:hover:bg-fuchsia-900" />
<div className="text-purple-50 bg-purple-50 hover:bg-purple-50 border-purple-50 dark:bg-purple-50 dark:hover:bg-purple-50" />
<div className="text-purple-100 bg-purple-100 hover:bg-purple-100 border-purple-100 dark:bg-purple-100 dark:hover:bg-purple-100" />
<div className="text-purple-200 bg-purple-200 hover:bg-purple-200 border-purple-200 dark:bg-purple-200 dark:hover:bg-purple-200" />
<div className="text-purple-700 bg-purple-700 hover:bg-purple-700 border-purple-700 dark:bg-purple-700 dark:hover:bg-purple-700" />
<div className="text-purple-800 bg-purple-800 hover:bg-purple-800 border-purple-800 dark:bg-purple-800 dark:hover:bg-purple-800" />
<div className="text-purple-900 bg-purple-900 hover:bg-purple-900 border-purple-900 dark:bg-purple-900 dark:hover:bg-purple-900" />
<div className="text-violet-50 bg-violet-50 hover:bg-violet-50 border-violet-50 dark:bg-violet-50 dark:hover:bg-violet-50" />
<div className="text-violet-100 bg-violet-100 hover:bg-violet-100 border-violet-100 dark:bg-violet-100 dark:hover:bg-violet-100" />
<div className="text-violet-200 bg-violet-200 hover:bg-violet-200 border-violet-200 dark:bg-violet-200 dark:hover:bg-violet-200" />
<div className="text-violet-700 bg-violet-700 hover:bg-violet-700 border-violet-700 dark:bg-violet-700 dark:hover:bg-violet-700" />
<div className="text-violet-800 bg-violet-800 hover:bg-violet-800 border-violet-800 dark:bg-violet-800 dark:hover:bg-violet-800" />
<div className="text-violet-900 bg-violet-900 hover:bg-violet-900 border-violet-900 dark:bg-violet-900 dark:hover:bg-violet-900" />
<div className="text-indigo-50 bg-indigo-50 hover:bg-indigo-50 border-indigo-50 dark:bg-indigo-50 dark:hover:bg-indigo-50" />
<div className="text-indigo-100 bg-indigo-100 hover:bg-indigo-100 border-indigo-100 dark:bg-indigo-100 dark:hover:bg-indigo-100" />
<div className="text-indigo-200 bg-indigo-200 hover:bg-indigo-200 border-indigo-200 dark:bg-indigo-200 dark:hover:bg-indigo-200" />
<div className="text-indigo-700 bg-indigo-700 hover:bg-indigo-700 border-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-700" />
<div className="text-indigo-800 bg-indigo-800 hover:bg-indigo-800 border-indigo-800 dark:bg-indigo-800 dark:hover:bg-indigo-800" />
<div className="text-indigo-900 bg-indigo-900 hover:bg-indigo-900 border-indigo-900 dark:bg-indigo-900 dark:hover:bg-indigo-900" />
<div className="text-blue-50 bg-blue-50 hover:bg-blue-50 border-blue-50 dark:bg-blue-50 dark:hover:bg-blue-50" />
<div className="text-blue-100 bg-blue-100 hover:bg-blue-100 border-blue-100 dark:bg-blue-100 dark:hover:bg-blue-100" />
<div className="text-blue-200 bg-blue-200 hover:bg-blue-200 border-blue-200 dark:bg-blue-200 dark:hover:bg-blue-200" />
<div className="text-blue-700 bg-blue-700 hover:bg-blue-700 border-blue-700 dark:bg-blue-700 dark:hover:bg-blue-700" />
<div className="text-blue-800 bg-blue-800 hover:bg-blue-800 border-blue-800 dark:bg-blue-800 dark:hover:bg-blue-800" />
<div className="text-blue-900 bg-blue-900 hover:bg-blue-900 border-blue-900 dark:bg-blue-900 dark:hover:bg-blue-900" />
<div className="text-sky-50 bg-sky-50 hover:bg-sky-50 border-sky-50 dark:bg-sky-50 dark:hover:bg-sky-50" />
<div className="text-sky-100 bg-sky-100 hover:bg-sky-100 border-sky-100 dark:bg-sky-100 dark:hover:bg-sky-100" />
<div className="text-sky-200 bg-sky-200 hover:bg-sky-200 border-sky-200 dark:bg-sky-200 dark:hover:bg-sky-200" />
<div className="text-sky-700 bg-sky-700 hover:bg-sky-700 border-sky-700 dark:bg-sky-700 dark:hover:bg-sky-700" />
<div className="text-sky-800 bg-sky-800 hover:bg-sky-800 border-sky-800 dark:bg-sky-800 dark:hover:bg-sky-800" />
<div className="text-sky-900 bg-sky-900 hover:bg-sky-900 border-sky-900 dark:bg-sky-900 dark:hover:bg-sky-900" />
<div className="text-cyan-50 bg-cyan-50 hover:bg-cyan-50 border-cyan-50 dark:bg-cyan-50 dark:hover:bg-cyan-50" />
<div className="text-cyan-100 bg-cyan-100 hover:bg-cyan-100 border-cyan-100 dark:bg-cyan-100 dark:hover:bg-cyan-100" />
<div className="text-cyan-200 bg-cyan-200 hover:bg-cyan-200 border-cyan-200 dark:bg-cyan-200 dark:hover:bg-cyan-200" />
<div className="text-cyan-700 bg-cyan-700 hover:bg-cyan-700 border-cyan-700 dark:bg-cyan-700 dark:hover:bg-cyan-700" />
<div className="text-cyan-800 bg-cyan-800 hover:bg-cyan-800 border-cyan-800 dark:bg-cyan-800 dark:hover:bg-cyan-800" />
<div className="text-cyan-900 bg-cyan-900 hover:bg-cyan-900 border-cyan-900 dark:bg-cyan-900 dark:hover:bg-cyan-900" />
<div className="text-teal-50 bg-teal-50 hover:bg-teal-50 border-teal-50 dark:bg-teal-50 dark:hover:bg-teal-50" />
<div className="text-teal-100 bg-teal-100 hover:bg-teal-100 border-teal-100 dark:bg-teal-100 dark:hover:bg-teal-100" />
<div className="text-teal-200 bg-teal-200 hover:bg-teal-200 border-teal-200 dark:bg-teal-200 dark:hover:bg-teal-200" />
<div className="text-teal-700 bg-teal-700 hover:bg-teal-700 border-teal-700 dark:bg-teal-700 dark:hover:bg-teal-700" />
<div className="text-teal-800 bg-teal-800 hover:bg-teal-800 border-teal-800 dark:bg-teal-800 dark:hover:bg-teal-800" />
<div className="text-teal-900 bg-teal-900 hover:bg-teal-900 border-teal-900 dark:bg-teal-900 dark:hover:bg-teal-900" />
<div className="text-emerald-50 bg-emerald-50 hover:bg-emerald-50 border-emerald-50 dark:bg-emerald-50 dark:hover:bg-emerald-50" />
<div className="text-emerald-100 bg-emerald-100 hover:bg-emerald-100 border-emerald-100 dark:bg-emerald-100 dark:hover:bg-emerald-100" />
<div className="text-emerald-200 bg-emerald-200 hover:bg-emerald-200 border-emerald-200 dark:bg-emerald-200 dark:hover:bg-emerald-200" />
<div className="text-emerald-700 bg-emerald-700 hover:bg-emerald-700 border-emerald-700 dark:bg-emerald-700 dark:hover:bg-emerald-700" />
<div className="text-emerald-800 bg-emerald-800 hover:bg-emerald-800 border-emerald-800 dark:bg-emerald-800 dark:hover:bg-emerald-800" />
<div className="text-emerald-900 bg-emerald-900 hover:bg-emerald-900 border-emerald-900 dark:bg-emerald-900 dark:hover:bg-emerald-900" />
<div className="text-green-50 bg-green-50 hover:bg-green-50 border-green-50 dark:bg-green-50 dark:hover:bg-green-50" />
<div className="text-green-100 bg-green-100 hover:bg-green-100 border-green-100 dark:bg-green-100 dark:hover:bg-green-100" />
<div className="text-green-200 bg-green-200 hover:bg-green-200 border-green-200 dark:bg-green-200 dark:hover:bg-green-200" />
<div className="text-green-700 bg-green-700 hover:bg-green-700 border-green-700 dark:bg-green-700 dark:hover:bg-green-700" />
<div className="text-green-800 bg-green-800 hover:bg-green-800 border-green-800 dark:bg-green-800 dark:hover:bg-green-800" />
<div className="text-green-900 bg-green-900 hover:bg-green-900 border-green-900 dark:bg-green-900 dark:hover:bg-green-900" />
<div className="text-lime-50 bg-lime-50 hover:bg-lime-50 border-lime-50 dark:bg-lime-50 dark:hover:bg-lime-50" />
<div className="text-lime-100 bg-lime-100 hover:bg-lime-100 border-lime-100 dark:bg-lime-100 dark:hover:bg-lime-100" />
<div className="text-lime-200 bg-lime-200 hover:bg-lime-200 border-lime-200 dark:bg-lime-200 dark:hover:bg-lime-200" />
<div className="text-lime-700 bg-lime-700 hover:bg-lime-700 border-lime-700 dark:bg-lime-700 dark:hover:bg-lime-700" />
<div className="text-lime-800 bg-lime-800 hover:bg-lime-800 border-lime-800 dark:bg-lime-800 dark:hover:bg-lime-800" />
<div className="text-lime-900 bg-lime-900 hover:bg-lime-900 border-lime-900 dark:bg-lime-900 dark:hover:bg-lime-900" />
<div className="text-yellow-50 bg-yellow-50 hover:bg-yellow-50 border-yellow-50 dark:bg-yellow-50 dark:hover:bg-yellow-50" />
<div className="text-yellow-100 bg-yellow-100 hover:bg-yellow-100 border-yellow-100 dark:bg-yellow-100 dark:hover:bg-yellow-100" />
<div className="text-yellow-200 bg-yellow-200 hover:bg-yellow-200 border-yellow-200 dark:bg-yellow-200 dark:hover:bg-yellow-200" />
<div className="text-yellow-700 bg-yellow-700 hover:bg-yellow-700 border-yellow-700 dark:bg-yellow-700 dark:hover:bg-yellow-700" />
<div className="text-yellow-800 bg-yellow-800 hover:bg-yellow-800 border-yellow-800 dark:bg-yellow-800 dark:hover:bg-yellow-800" />
<div className="text-yellow-900 bg-yellow-900 hover:bg-yellow-900 border-yellow-900 dark:bg-yellow-900 dark:hover:bg-yellow-900" />
<div className="text-amber-50 bg-amber-50 hover:bg-amber-50 border-amber-50 dark:bg-amber-50 dark:hover:bg-amber-50" />
<div className="text-amber-100 bg-amber-100 hover:bg-amber-100 border-amber-100 dark:bg-amber-100 dark:hover:bg-amber-100" />
<div className="text-amber-200 bg-amber-200 hover:bg-amber-200 border-amber-200 dark:bg-amber-200 dark:hover:bg-amber-200" />
<div className="text-amber-700 bg-amber-700 hover:bg-amber-700 border-amber-700 dark:bg-amber-700 dark:hover:bg-amber-700" />
<div className="text-amber-800 bg-amber-800 hover:bg-amber-800 border-amber-800 dark:bg-amber-800 dark:hover:bg-amber-800" />
<div className="text-amber-900 bg-amber-900 hover:bg-amber-900 border-amber-900 dark:bg-amber-900 dark:hover:bg-amber-900" />
<div className="text-orange-50 bg-orange-50 hover:bg-orange-50 border-orange-50 dark:bg-orange-50 dark:hover:bg-orange-50" />
<div className="text-orange-100 bg-orange-100 hover:bg-orange-100 border-orange-100 dark:bg-orange-100 dark:hover:bg-orange-100" />
<div className="text-orange-200 bg-orange-200 hover:bg-orange-200 border-orange-200 dark:bg-orange-200 dark:hover:bg-orange-200" />
<div className="text-orange-700 bg-orange-700 hover:bg-orange-700 border-orange-700 dark:bg-orange-700 dark:hover:bg-orange-700" />
<div className="text-orange-800 bg-orange-800 hover:bg-orange-800 border-orange-800 dark:bg-orange-800 dark:hover:bg-orange-800" />
<div className="text-orange-900 bg-orange-900 hover:bg-orange-900 border-orange-900 dark:bg-orange-900 dark:hover:bg-orange-900" />
<div className="text-red-50 bg-red-50 hover:bg-red-50 border-red-50 dark:bg-red-50 dark:hover:bg-red-50" />
<div className="text-red-100 bg-red-100 hover:bg-red-100 border-red-100 dark:bg-red-100 dark:hover:bg-red-100" />
<div className="text-red-200 bg-red-200 hover:bg-red-200 border-red-200 dark:bg-red-200 dark:hover:bg-red-200" />
<div className="text-red-700 bg-red-700 hover:bg-red-700 border-red-700 dark:bg-red-700 dark:hover:bg-red-700" />
<div className="text-red-800 bg-red-800 hover:bg-red-800 border-red-800 dark:bg-red-800 dark:hover:bg-red-800" />
<div className="text-red-900 bg-red-900 hover:bg-red-900 border-red-900 dark:bg-red-900 dark:hover:bg-red-900" />
<div className="text-stone-50 bg-stone-50 hover:bg-stone-50 border-stone-50 dark:bg-stone-50 dark:hover:bg-stone-50" />
<div className="text-stone-100 bg-stone-100 hover:bg-stone-100 border-stone-100 dark:bg-stone-100 dark:hover:bg-stone-100" />
<div className="text-stone-200 bg-stone-200 hover:bg-stone-200 border-stone-200 dark:bg-stone-200 dark:hover:bg-stone-200" />
<div className="text-stone-700 bg-stone-700 hover:bg-stone-700 border-stone-700 dark:bg-stone-700 dark:hover:bg-stone-700" />
<div className="text-stone-800 bg-stone-800 hover:bg-stone-800 border-stone-800 dark:bg-stone-800 dark:hover:bg-stone-800" />
<div className="text-stone-900 bg-stone-900 hover:bg-stone-900 border-stone-900 dark:bg-stone-900 dark:hover:bg-stone-900" />
<div className="text-neutral-50 bg-neutral-50 hover:bg-neutral-50 border-neutral-50 dark:bg-neutral-50 dark:hover:bg-neutral-50" />
<div className="text-neutral-100 bg-neutral-100 hover:bg-neutral-100 border-neutral-100 dark:bg-neutral-100 dark:hover:bg-neutral-100" />
<div className="text-neutral-200 bg-neutral-200 hover:bg-neutral-200 border-neutral-200 dark:bg-neutral-200 dark:hover:bg-neutral-200" />
<div className="text-neutral-700 bg-neutral-700 hover:bg-neutral-700 border-neutral-700 dark:bg-neutral-700 dark:hover:bg-neutral-700" />
<div className="text-neutral-800 bg-neutral-800 hover:bg-neutral-800 border-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800" />
<div className="text-neutral-900 bg-neutral-900 hover:bg-neutral-900 border-neutral-900 dark:bg-neutral-900 dark:hover:bg-neutral-900" />
<div className="text-zinc-50 bg-zinc-50 hover:bg-zinc-50 border-zinc-50 dark:bg-zinc-50 dark:hover:bg-zinc-50" />
<div className="text-zinc-100 bg-zinc-100 hover:bg-zinc-100 border-zinc-100 dark:bg-zinc-100 dark:hover:bg-zinc-100" />
<div className="text-zinc-200 bg-zinc-200 hover:bg-zinc-200 border-zinc-200 dark:bg-zinc-200 dark:hover:bg-zinc-200" />
<div className="text-zinc-700 bg-zinc-700 hover:bg-zinc-700 border-zinc-700 dark:bg-zinc-700 dark:hover:bg-zinc-700" />
<div className="text-zinc-800 bg-zinc-800 hover:bg-zinc-800 border-zinc-800 dark:bg-zinc-800 dark:hover:bg-zinc-800" />
<div className="text-zinc-900 bg-zinc-900 hover:bg-zinc-900 border-zinc-900 dark:bg-zinc-900 dark:hover:bg-zinc-900" />
<div className="text-grey-50 bg-grey-50 hover:bg-grey-50 border-grey-50 dark:bg-grey-50 dark:hover:bg-grey-50" />
<div className="text-grey-100 bg-grey-100 hover:bg-grey-100 border-grey-100 dark:bg-grey-100 dark:hover:bg-grey-100" />
<div className="text-grey-200 bg-grey-200 hover:bg-grey-200 border-grey-200 dark:bg-grey-200 dark:hover:bg-grey-200" />
<div className="text-grey-700 bg-grey-700 hover:bg-grey-700 border-grey-700 dark:bg-grey-700 dark:hover:bg-grey-700" />
<div className="text-grey-800 bg-grey-800 hover:bg-grey-800 border-grey-800 dark:bg-grey-800 dark:hover:bg-grey-800" />
<div className="text-grey-900 bg-grey-900 hover:bg-grey-900 border-grey-900 dark:bg-grey-900 dark:hover:bg-grey-900" />
<div className="text-slate-50 bg-slate-50 hover:bg-slate-50 border-slate-50 dark:bg-slate-50 dark:hover:bg-slate-50" />
<div className="text-slate-100 bg-slate-100 hover:bg-slate-100 border-slate-100 dark:bg-slate-100 dark:hover:bg-slate-100" />
<div className="text-slate-200 bg-slate-200 hover:bg-slate-200 border-slate-200 dark:bg-slate-200 dark:hover:bg-slate-200" />
<div className="text-slate-700 bg-slate-700 hover:bg-slate-700 border-slate-700 dark:bg-slate-700 dark:hover:bg-slate-700" />
<div className="text-slate-800 bg-slate-800 hover:bg-slate-800 border-slate-800 dark:bg-slate-800 dark:hover:bg-slate-800" />
<div className="text-slate-900 bg-slate-900 hover:bg-slate-900 border-slate-900 dark:bg-slate-900 dark:hover:bg-slate-900" />
<div className="bg-chart-0 text-chart-0" />
<div className="bg-chart-1 text-chart-1" />
<div className="bg-chart-2 text-chart-2" />
<div className="bg-chart-3 text-chart-3" />
<div className="bg-chart-4 text-chart-4" />
<div className="bg-chart-5 text-chart-5" />
<div className="bg-chart-6 text-chart-6" />
<div className="bg-chart-7 text-chart-7" />
<div className="bg-chart-8 text-chart-8" />
<div className="bg-chart-9 text-chart-9" />
<div className="bg-chart-10 text-chart-10" />
<div className="bg-chart-11 text-chart-11" />
<div className="border-rose-50 bg-rose-50 text-rose-50 hover:bg-rose-50 dark:bg-rose-50 dark:hover:bg-rose-50" />
<div className="border-rose-100 bg-rose-100 text-rose-100 hover:bg-rose-100 dark:bg-rose-100 dark:hover:bg-rose-100" />
<div className="border-rose-200 bg-rose-200 text-rose-200 hover:bg-rose-200 dark:bg-rose-200 dark:hover:bg-rose-200" />
<div className="border-rose-700 bg-rose-700 text-rose-700 hover:bg-rose-700 dark:bg-rose-700 dark:hover:bg-rose-700" />
<div className="border-rose-800 bg-rose-800 text-rose-800 hover:bg-rose-800 dark:bg-rose-800 dark:hover:bg-rose-800" />
<div className="border-rose-900 bg-rose-900 text-rose-900 hover:bg-rose-900 dark:bg-rose-900 dark:hover:bg-rose-900" />
<div className="border-pink-50 bg-pink-50 text-pink-50 hover:bg-pink-50 dark:bg-pink-50 dark:hover:bg-pink-50" />
<div className="border-pink-100 bg-pink-100 text-pink-100 hover:bg-pink-100 dark:bg-pink-100 dark:hover:bg-pink-100" />
<div className="border-pink-200 bg-pink-200 text-pink-200 hover:bg-pink-200 dark:bg-pink-200 dark:hover:bg-pink-200" />
<div className="border-pink-700 bg-pink-700 text-pink-700 hover:bg-pink-700 dark:bg-pink-700 dark:hover:bg-pink-700" />
<div className="border-pink-800 bg-pink-800 text-pink-800 hover:bg-pink-800 dark:bg-pink-800 dark:hover:bg-pink-800" />
<div className="border-pink-900 bg-pink-900 text-pink-900 hover:bg-pink-900 dark:bg-pink-900 dark:hover:bg-pink-900" />
<div className="border-fuchsia-50 bg-fuchsia-50 text-fuchsia-50 hover:bg-fuchsia-50 dark:bg-fuchsia-50 dark:hover:bg-fuchsia-50" />
<div className="border-fuchsia-100 bg-fuchsia-100 text-fuchsia-100 hover:bg-fuchsia-100 dark:bg-fuchsia-100 dark:hover:bg-fuchsia-100" />
<div className="border-fuchsia-200 bg-fuchsia-200 text-fuchsia-200 hover:bg-fuchsia-200 dark:bg-fuchsia-200 dark:hover:bg-fuchsia-200" />
<div className="border-fuchsia-700 bg-fuchsia-700 text-fuchsia-700 hover:bg-fuchsia-700 dark:bg-fuchsia-700 dark:hover:bg-fuchsia-700" />
<div className="border-fuchsia-800 bg-fuchsia-800 text-fuchsia-800 hover:bg-fuchsia-800 dark:bg-fuchsia-800 dark:hover:bg-fuchsia-800" />
<div className="border-fuchsia-900 bg-fuchsia-900 text-fuchsia-900 hover:bg-fuchsia-900 dark:bg-fuchsia-900 dark:hover:bg-fuchsia-900" />
<div className="border-purple-50 bg-purple-50 text-purple-50 hover:bg-purple-50 dark:bg-purple-50 dark:hover:bg-purple-50" />
<div className="border-purple-100 bg-purple-100 text-purple-100 hover:bg-purple-100 dark:bg-purple-100 dark:hover:bg-purple-100" />
<div className="border-purple-200 bg-purple-200 text-purple-200 hover:bg-purple-200 dark:bg-purple-200 dark:hover:bg-purple-200" />
<div className="border-purple-700 bg-purple-700 text-purple-700 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-700" />
<div className="border-purple-800 bg-purple-800 text-purple-800 hover:bg-purple-800 dark:bg-purple-800 dark:hover:bg-purple-800" />
<div className="border-purple-900 bg-purple-900 text-purple-900 hover:bg-purple-900 dark:bg-purple-900 dark:hover:bg-purple-900" />
<div className="border-violet-50 bg-violet-50 text-violet-50 hover:bg-violet-50 dark:bg-violet-50 dark:hover:bg-violet-50" />
<div className="border-violet-100 bg-violet-100 text-violet-100 hover:bg-violet-100 dark:bg-violet-100 dark:hover:bg-violet-100" />
<div className="border-violet-200 bg-violet-200 text-violet-200 hover:bg-violet-200 dark:bg-violet-200 dark:hover:bg-violet-200" />
<div className="border-violet-700 bg-violet-700 text-violet-700 hover:bg-violet-700 dark:bg-violet-700 dark:hover:bg-violet-700" />
<div className="border-violet-800 bg-violet-800 text-violet-800 hover:bg-violet-800 dark:bg-violet-800 dark:hover:bg-violet-800" />
<div className="border-violet-900 bg-violet-900 text-violet-900 hover:bg-violet-900 dark:bg-violet-900 dark:hover:bg-violet-900" />
<div className="border-indigo-50 bg-indigo-50 text-indigo-50 hover:bg-indigo-50 dark:bg-indigo-50 dark:hover:bg-indigo-50" />
<div className="border-indigo-100 bg-indigo-100 text-indigo-100 hover:bg-indigo-100 dark:bg-indigo-100 dark:hover:bg-indigo-100" />
<div className="border-indigo-200 bg-indigo-200 text-indigo-200 hover:bg-indigo-200 dark:bg-indigo-200 dark:hover:bg-indigo-200" />
<div className="border-indigo-700 bg-indigo-700 text-indigo-700 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-700" />
<div className="border-indigo-800 bg-indigo-800 text-indigo-800 hover:bg-indigo-800 dark:bg-indigo-800 dark:hover:bg-indigo-800" />
<div className="border-indigo-900 bg-indigo-900 text-indigo-900 hover:bg-indigo-900 dark:bg-indigo-900 dark:hover:bg-indigo-900" />
<div className="border-blue-50 bg-blue-50 text-blue-50 hover:bg-blue-50 dark:bg-blue-50 dark:hover:bg-blue-50" />
<div className="border-blue-100 bg-blue-100 text-blue-100 hover:bg-blue-100 dark:bg-blue-100 dark:hover:bg-blue-100" />
<div className="border-blue-200 bg-blue-200 text-blue-200 hover:bg-blue-200 dark:bg-blue-200 dark:hover:bg-blue-200" />
<div className="border-blue-700 bg-blue-700 text-blue-700 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-700" />
<div className="border-blue-800 bg-blue-800 text-blue-800 hover:bg-blue-800 dark:bg-blue-800 dark:hover:bg-blue-800" />
<div className="border-blue-900 bg-blue-900 text-blue-900 hover:bg-blue-900 dark:bg-blue-900 dark:hover:bg-blue-900" />
<div className="border-sky-50 bg-sky-50 text-sky-50 hover:bg-sky-50 dark:bg-sky-50 dark:hover:bg-sky-50" />
<div className="border-sky-100 bg-sky-100 text-sky-100 hover:bg-sky-100 dark:bg-sky-100 dark:hover:bg-sky-100" />
<div className="border-sky-200 bg-sky-200 text-sky-200 hover:bg-sky-200 dark:bg-sky-200 dark:hover:bg-sky-200" />
<div className="border-sky-700 bg-sky-700 text-sky-700 hover:bg-sky-700 dark:bg-sky-700 dark:hover:bg-sky-700" />
<div className="border-sky-800 bg-sky-800 text-sky-800 hover:bg-sky-800 dark:bg-sky-800 dark:hover:bg-sky-800" />
<div className="border-sky-900 bg-sky-900 text-sky-900 hover:bg-sky-900 dark:bg-sky-900 dark:hover:bg-sky-900" />
<div className="border-cyan-50 bg-cyan-50 text-cyan-50 hover:bg-cyan-50 dark:bg-cyan-50 dark:hover:bg-cyan-50" />
<div className="border-cyan-100 bg-cyan-100 text-cyan-100 hover:bg-cyan-100 dark:bg-cyan-100 dark:hover:bg-cyan-100" />
<div className="border-cyan-200 bg-cyan-200 text-cyan-200 hover:bg-cyan-200 dark:bg-cyan-200 dark:hover:bg-cyan-200" />
<div className="border-cyan-700 bg-cyan-700 text-cyan-700 hover:bg-cyan-700 dark:bg-cyan-700 dark:hover:bg-cyan-700" />
<div className="border-cyan-800 bg-cyan-800 text-cyan-800 hover:bg-cyan-800 dark:bg-cyan-800 dark:hover:bg-cyan-800" />
<div className="border-cyan-900 bg-cyan-900 text-cyan-900 hover:bg-cyan-900 dark:bg-cyan-900 dark:hover:bg-cyan-900" />
<div className="border-teal-50 bg-teal-50 text-teal-50 hover:bg-teal-50 dark:bg-teal-50 dark:hover:bg-teal-50" />
<div className="border-teal-100 bg-teal-100 text-teal-100 hover:bg-teal-100 dark:bg-teal-100 dark:hover:bg-teal-100" />
<div className="border-teal-200 bg-teal-200 text-teal-200 hover:bg-teal-200 dark:bg-teal-200 dark:hover:bg-teal-200" />
<div className="border-teal-700 bg-teal-700 text-teal-700 hover:bg-teal-700 dark:bg-teal-700 dark:hover:bg-teal-700" />
<div className="border-teal-800 bg-teal-800 text-teal-800 hover:bg-teal-800 dark:bg-teal-800 dark:hover:bg-teal-800" />
<div className="border-teal-900 bg-teal-900 text-teal-900 hover:bg-teal-900 dark:bg-teal-900 dark:hover:bg-teal-900" />
<div className="border-emerald-50 bg-emerald-50 text-emerald-50 hover:bg-emerald-50 dark:bg-emerald-50 dark:hover:bg-emerald-50" />
<div className="border-emerald-100 bg-emerald-100 text-emerald-100 hover:bg-emerald-100 dark:bg-emerald-100 dark:hover:bg-emerald-100" />
<div className="border-emerald-200 bg-emerald-200 text-emerald-200 hover:bg-emerald-200 dark:bg-emerald-200 dark:hover:bg-emerald-200" />
<div className="border-emerald-700 bg-emerald-700 text-emerald-700 hover:bg-emerald-700 dark:bg-emerald-700 dark:hover:bg-emerald-700" />
<div className="border-emerald-800 bg-emerald-800 text-emerald-800 hover:bg-emerald-800 dark:bg-emerald-800 dark:hover:bg-emerald-800" />
<div className="border-emerald-900 bg-emerald-900 text-emerald-900 hover:bg-emerald-900 dark:bg-emerald-900 dark:hover:bg-emerald-900" />
<div className="border-green-50 bg-green-50 text-green-50 hover:bg-green-50 dark:bg-green-50 dark:hover:bg-green-50" />
<div className="border-green-100 bg-green-100 text-green-100 hover:bg-green-100 dark:bg-green-100 dark:hover:bg-green-100" />
<div className="border-green-200 bg-green-200 text-green-200 hover:bg-green-200 dark:bg-green-200 dark:hover:bg-green-200" />
<div className="border-green-700 bg-green-700 text-green-700 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-700" />
<div className="border-green-800 bg-green-800 text-green-800 hover:bg-green-800 dark:bg-green-800 dark:hover:bg-green-800" />
<div className="border-green-900 bg-green-900 text-green-900 hover:bg-green-900 dark:bg-green-900 dark:hover:bg-green-900" />
<div className="border-lime-50 bg-lime-50 text-lime-50 hover:bg-lime-50 dark:bg-lime-50 dark:hover:bg-lime-50" />
<div className="border-lime-100 bg-lime-100 text-lime-100 hover:bg-lime-100 dark:bg-lime-100 dark:hover:bg-lime-100" />
<div className="border-lime-200 bg-lime-200 text-lime-200 hover:bg-lime-200 dark:bg-lime-200 dark:hover:bg-lime-200" />
<div className="border-lime-700 bg-lime-700 text-lime-700 hover:bg-lime-700 dark:bg-lime-700 dark:hover:bg-lime-700" />
<div className="border-lime-800 bg-lime-800 text-lime-800 hover:bg-lime-800 dark:bg-lime-800 dark:hover:bg-lime-800" />
<div className="border-lime-900 bg-lime-900 text-lime-900 hover:bg-lime-900 dark:bg-lime-900 dark:hover:bg-lime-900" />
<div className="border-yellow-50 bg-yellow-50 text-yellow-50 hover:bg-yellow-50 dark:bg-yellow-50 dark:hover:bg-yellow-50" />
<div className="border-yellow-100 bg-yellow-100 text-yellow-100 hover:bg-yellow-100 dark:bg-yellow-100 dark:hover:bg-yellow-100" />
<div className="border-yellow-200 bg-yellow-200 text-yellow-200 hover:bg-yellow-200 dark:bg-yellow-200 dark:hover:bg-yellow-200" />
<div className="border-yellow-700 bg-yellow-700 text-yellow-700 hover:bg-yellow-700 dark:bg-yellow-700 dark:hover:bg-yellow-700" />
<div className="border-yellow-800 bg-yellow-800 text-yellow-800 hover:bg-yellow-800 dark:bg-yellow-800 dark:hover:bg-yellow-800" />
<div className="border-yellow-900 bg-yellow-900 text-yellow-900 hover:bg-yellow-900 dark:bg-yellow-900 dark:hover:bg-yellow-900" />
<div className="border-amber-50 bg-amber-50 text-amber-50 hover:bg-amber-50 dark:bg-amber-50 dark:hover:bg-amber-50" />
<div className="border-amber-100 bg-amber-100 text-amber-100 hover:bg-amber-100 dark:bg-amber-100 dark:hover:bg-amber-100" />
<div className="border-amber-200 bg-amber-200 text-amber-200 hover:bg-amber-200 dark:bg-amber-200 dark:hover:bg-amber-200" />
<div className="border-amber-700 bg-amber-700 text-amber-700 hover:bg-amber-700 dark:bg-amber-700 dark:hover:bg-amber-700" />
<div className="border-amber-800 bg-amber-800 text-amber-800 hover:bg-amber-800 dark:bg-amber-800 dark:hover:bg-amber-800" />
<div className="border-amber-900 bg-amber-900 text-amber-900 hover:bg-amber-900 dark:bg-amber-900 dark:hover:bg-amber-900" />
<div className="border-orange-50 bg-orange-50 text-orange-50 hover:bg-orange-50 dark:bg-orange-50 dark:hover:bg-orange-50" />
<div className="border-orange-100 bg-orange-100 text-orange-100 hover:bg-orange-100 dark:bg-orange-100 dark:hover:bg-orange-100" />
<div className="border-orange-200 bg-orange-200 text-orange-200 hover:bg-orange-200 dark:bg-orange-200 dark:hover:bg-orange-200" />
<div className="border-orange-700 bg-orange-700 text-orange-700 hover:bg-orange-700 dark:bg-orange-700 dark:hover:bg-orange-700" />
<div className="border-orange-800 bg-orange-800 text-orange-800 hover:bg-orange-800 dark:bg-orange-800 dark:hover:bg-orange-800" />
<div className="border-orange-900 bg-orange-900 text-orange-900 hover:bg-orange-900 dark:bg-orange-900 dark:hover:bg-orange-900" />
<div className="border-red-50 bg-red-50 text-red-50 hover:bg-red-50 dark:bg-red-50 dark:hover:bg-red-50" />
<div className="border-red-100 bg-red-100 text-red-100 hover:bg-red-100 dark:bg-red-100 dark:hover:bg-red-100" />
<div className="border-red-200 bg-red-200 text-red-200 hover:bg-red-200 dark:bg-red-200 dark:hover:bg-red-200" />
<div className="border-red-700 bg-red-700 text-red-700 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-700" />
<div className="border-red-800 bg-red-800 text-red-800 hover:bg-red-800 dark:bg-red-800 dark:hover:bg-red-800" />
<div className="border-red-900 bg-red-900 text-red-900 hover:bg-red-900 dark:bg-red-900 dark:hover:bg-red-900" />
<div className="border-stone-50 bg-stone-50 text-stone-50 hover:bg-stone-50 dark:bg-stone-50 dark:hover:bg-stone-50" />
<div className="border-stone-100 bg-stone-100 text-stone-100 hover:bg-stone-100 dark:bg-stone-100 dark:hover:bg-stone-100" />
<div className="border-stone-200 bg-stone-200 text-stone-200 hover:bg-stone-200 dark:bg-stone-200 dark:hover:bg-stone-200" />
<div className="border-stone-700 bg-stone-700 text-stone-700 hover:bg-stone-700 dark:bg-stone-700 dark:hover:bg-stone-700" />
<div className="border-stone-800 bg-stone-800 text-stone-800 hover:bg-stone-800 dark:bg-stone-800 dark:hover:bg-stone-800" />
<div className="border-stone-900 bg-stone-900 text-stone-900 hover:bg-stone-900 dark:bg-stone-900 dark:hover:bg-stone-900" />
<div className="border-neutral-50 bg-neutral-50 text-neutral-50 hover:bg-neutral-50 dark:bg-neutral-50 dark:hover:bg-neutral-50" />
<div className="border-neutral-100 bg-neutral-100 text-neutral-100 hover:bg-neutral-100 dark:bg-neutral-100 dark:hover:bg-neutral-100" />
<div className="border-neutral-200 bg-neutral-200 text-neutral-200 hover:bg-neutral-200 dark:bg-neutral-200 dark:hover:bg-neutral-200" />
<div className="border-neutral-700 bg-neutral-700 text-neutral-700 hover:bg-neutral-700 dark:bg-neutral-700 dark:hover:bg-neutral-700" />
<div className="border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800" />
<div className="border-neutral-900 bg-neutral-900 text-neutral-900 hover:bg-neutral-900 dark:bg-neutral-900 dark:hover:bg-neutral-900" />
<div className="border-zinc-50 bg-zinc-50 text-zinc-50 hover:bg-zinc-50 dark:bg-zinc-50 dark:hover:bg-zinc-50" />
<div className="border-zinc-100 bg-zinc-100 text-zinc-100 hover:bg-zinc-100 dark:bg-zinc-100 dark:hover:bg-zinc-100" />
<div className="border-zinc-200 bg-zinc-200 text-zinc-200 hover:bg-zinc-200 dark:bg-zinc-200 dark:hover:bg-zinc-200" />
<div className="border-zinc-700 bg-zinc-700 text-zinc-700 hover:bg-zinc-700 dark:bg-zinc-700 dark:hover:bg-zinc-700" />
<div className="border-zinc-800 bg-zinc-800 text-zinc-800 hover:bg-zinc-800 dark:bg-zinc-800 dark:hover:bg-zinc-800" />
<div className="border-zinc-900 bg-zinc-900 text-zinc-900 hover:bg-zinc-900 dark:bg-zinc-900 dark:hover:bg-zinc-900" />
<div className="border-grey-50 bg-grey-50 text-grey-50 hover:bg-grey-50 dark:bg-grey-50 dark:hover:bg-grey-50" />
<div className="border-grey-100 bg-grey-100 text-grey-100 hover:bg-grey-100 dark:bg-grey-100 dark:hover:bg-grey-100" />
<div className="border-grey-200 bg-grey-200 text-grey-200 hover:bg-grey-200 dark:bg-grey-200 dark:hover:bg-grey-200" />
<div className="border-grey-700 bg-grey-700 text-grey-700 hover:bg-grey-700 dark:bg-grey-700 dark:hover:bg-grey-700" />
<div className="border-grey-800 bg-grey-800 text-grey-800 hover:bg-grey-800 dark:bg-grey-800 dark:hover:bg-grey-800" />
<div className="border-grey-900 bg-grey-900 text-grey-900 hover:bg-grey-900 dark:bg-grey-900 dark:hover:bg-grey-900" />
<div className="border-slate-50 bg-slate-50 text-slate-50 hover:bg-slate-50 dark:bg-slate-50 dark:hover:bg-slate-50" />
<div className="border-slate-100 bg-slate-100 text-slate-100 hover:bg-slate-100 dark:bg-slate-100 dark:hover:bg-slate-100" />
<div className="border-slate-200 bg-slate-200 text-slate-200 hover:bg-slate-200 dark:bg-slate-200 dark:hover:bg-slate-200" />
<div className="border-slate-700 bg-slate-700 text-slate-700 hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-700" />
<div className="border-slate-800 bg-slate-800 text-slate-800 hover:bg-slate-800 dark:bg-slate-800 dark:hover:bg-slate-800" />
<div className="border-slate-900 bg-slate-900 text-slate-900 hover:bg-slate-900 dark:bg-slate-900 dark:hover:bg-slate-900" />
</div>
</body>
</html>

View File

@@ -1,7 +1,13 @@
import { Sidebar } from '@/components/sidebar';
import { createFileRoute } from '@tanstack/react-router';
import { getServerEnvs } from '@/server/get-envs';
import { Outlet, createFileRoute, redirect } from '@tanstack/react-router';
export interface ConfigResonse {
apiUrl: string;
dashboardUrl: string;
isSelfHosted: boolean;
isMaintenance: boolean;
isDemo: boolean;
}
// Nothing sensitive here, its client environment variables which is good for debugging
export const Route = createFileRoute('/api/config')({
server: {

View File

@@ -1,14 +1,15 @@
import { queryOptions } from '@tanstack/react-query';
import { createServerFn } from '@tanstack/react-start';
export const getServerEnvs = createServerFn().handler(async () => {
export const getServerEnvs = createServerFn().handler(() => {
const envs = {
apiUrl: String(process.env.API_URL || process.env.NEXT_PUBLIC_API_URL),
dashboardUrl: String(
process.env.DASHBOARD_URL || process.env.NEXT_PUBLIC_DASHBOARD_URL,
process.env.DASHBOARD_URL || process.env.NEXT_PUBLIC_DASHBOARD_URL
),
isSelfHosted: process.env.SELF_HOSTED !== undefined,
isMaintenance: process.env.MAINTENANCE === '1',
isDemo: process.env.DEMO_USER_ID !== undefined,
};
return envs;