init

2025-08-20 22:35:40 -05:00
commit f51c278cd3
169 changed files with 8173 additions and 0 deletions
--- a/src/app/routes/__root.tsx
+++ b/src/app/routes/__root.tsx
@@ -0,0 +1,107 @@
+import '@mantine/core/styles.css';
+import '@mantine/dates/styles.css';
+import {
+  HeadContent,
+  Navigate,
+  Outlet,
+  Scripts,
+  createRootRouteWithContext
+} from '@tanstack/react-router'
+import * as React from 'react'
+import { DefaultCatchBoundary } from '@/components/DefaultCatchBoundary'
+import { type QueryClient } from '@tanstack/react-query'
+import { ensureSuperTokensFrontend } from '@/lib/supertokens/client'
+import { AuthContextType, authQueryConfig } from '@/contexts/auth-context'
+import Providers from '@/components/providers'
+import { ColorSchemeScript, mantineHtmlProps } from '@mantine/core';
+import { HeaderConfig } from '@/features/core/types/header-config';
+
+export const Route = createRootRouteWithContext<{
+  queryClient: QueryClient,
+  auth: AuthContextType,
+  header: HeaderConfig,
+  refresh: { toRefresh: string[] }
+}>()({
+  head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8'
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, interactive-widget=overlays-content',
+      }
+    ],
+    links: [
+      {
+        rel: 'apple-touch-icon',
+        sizes: '180x180',
+        href: '/apple-touch-icon.png',
+      },
+      {
+        rel: 'icon',
+        type: 'image/png',
+        sizes: '32x32',
+        href: '/favicon-32x32.png',
+      },
+      {
+        rel: 'icon',
+        type: 'image/png',
+        sizes: '16x16',
+        href: '/favicon-16x16.png',
+      },
+      { rel: 'manifest', href: '/site.webmanifest' },
+      { rel: 'icon', href: '/favicon.ico' },
+    ],
+  }),
+  errorComponent: (props) => {
+    return (
+      <RootDocument>
+        <DefaultCatchBoundary {...props} />
+      </RootDocument>
+    )
+  },
+  component: RootComponent,
+  notFoundComponent: () => <Navigate to="/" />,
+  beforeLoad: async ({ context }) => {
+    // I don't really like this. I wish there was some way before the router is rendered to useAuth() and pass context there.
+    // See: https://github.com/TanStack/router/discussions/3531
+    const auth = await context.queryClient.ensureQueryData(authQueryConfig)
+    return {
+      auth
+    };
+  }
+})
+
+function RootComponent() {
+
+  React.useEffect(() => {
+    ensureSuperTokensFrontend()
+  }, [])
+
+  return (
+    <RootDocument>
+      <Providers>
+        <Outlet />
+      </Providers>
+    </RootDocument>
+  )
+}
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html {...mantineHtmlProps} style={{ overflowX: 'hidden', overflowY: 'hidden', position: 'fixed', width: '100%' }}>
+      <head>
+        <HeadContent />
+        <ColorSchemeScript />
+        <link rel="stylesheet" href="/styles.css" />
+      </head>
+      <body style={{ overflowX: 'hidden', overflowY: 'hidden', position: 'fixed', width: '100%' }}>
+        <div className='app'>
+          {children}
+        </div>
+        <Scripts />
+      </body>
+    </html>
+  )
+}