diff --git a/heat-stack/app/components/ui/README.md b/heat-stack/app/components/ui/README.md
index 433847df..1ad189cb 100644
--- a/heat-stack/app/components/ui/README.md
+++ b/heat-stack/app/components/ui/README.md
@@ -4,4 +4,4 @@ Some components in this directory are downloaded via the
 [shadcn/ui](https://ui.shadcn.com) [CLI](https://ui.shadcn.com/docs/cli). Feel
 free to customize them to your needs. It's important to know that shadcn/ui is
 not a library of components you install, but instead it's a registry of prebuilt
-components which you can download and customize.
+components which you can download and customize.
\ No newline at end of file
diff --git a/heat-stack/app/components/ui/checkbox.tsx b/heat-stack/app/components/ui/checkbox.tsx
index 902fb648..298447c9 100644
--- a/heat-stack/app/components/ui/checkbox.tsx
+++ b/heat-stack/app/components/ui/checkbox.tsx
@@ -4,6 +4,13 @@ import { Check } from 'lucide-react'
 
 import { cn } from '#app/utils/misc.tsx'
 
+export type CheckboxProps = Omit<
+	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
+	'type'
+> & {
+	type?: string
+}
+
 const Checkbox = React.forwardRef<
 	React.ElementRef<typeof CheckboxPrimitive.Root>,
 	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
@@ -20,6 +27,14 @@ const Checkbox = React.forwardRef<
 			className={cn('flex items-center justify-center text-current')}
 		>
 			<Check className="h-4 w-4" />
+			{/* <svg viewBox="0 0 8 8">
+				<path
+					d="M1,4 L3,6 L7,2"
+					stroke="currentcolor"
+					strokeWidth="1"
+					fill="none"
+				/>
+			</svg> */}
 		</CheckboxPrimitive.Indicator>
 	</CheckboxPrimitive.Root>
 ))
diff --git a/heat-stack/app/root.tsx b/heat-stack/app/root.tsx
index 65010781..49246039 100644
--- a/heat-stack/app/root.tsx
+++ b/heat-stack/app/root.tsx
@@ -1,497 +1,56 @@
-import { useForm } from '@conform-to/react'
-import { parse } from '@conform-to/zod'
 import { cssBundleHref } from '@remix-run/css-bundle'
-import {
-	json,
-	type DataFunctionArgs,
-	type HeadersFunction,
-	type LinksFunction,
-	type MetaFunction,
-} from '@remix-run/node'
-import {
-	Form,
-	Link,
-	Links,
-	LiveReload,
-	Meta,
-	Outlet,
-	Scripts,
-	ScrollRestoration,
-	useFetcher,
-	useFetchers,
-	useLoaderData,
-	useMatches,
-	useSubmit,
-} from '@remix-run/react'
-import { withSentry } from '@sentry/remix'
-import { Suspense, lazy, useEffect, useRef, useState } from 'react'
-import { object, z } from 'zod'
-import { Confetti } from './components/confetti.tsx'
-import { GeneralErrorBoundary } from './components/error-boundary.tsx'
-import { ErrorList } from './components/forms.tsx'
-import { SearchBar } from './components/search-bar.tsx'
-import { EpicToaster } from './components/toaster.tsx'
-import { Button } from './components/ui/button.tsx'
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuPortal,
-	DropdownMenuTrigger,
-} from './components/ui/dropdown-menu.tsx'
-import { Icon, href as iconsHref } from './components/ui/icon.tsx'
 import fontStyleSheetUrl from './styles/font.css'
 import tailwindStyleSheetUrl from './styles/tailwind.css'
-import { authenticator, getUserId } from './utils/auth.server.ts'
-import { ClientHintCheck, getHints, useHints } from './utils/client-hints.tsx'
-import { getConfetti } from './utils/confetti.server.ts'
-import { prisma } from './utils/db.server.ts'
-import { getEnv } from './utils/env.server.ts'
-import {
-	combineHeaders,
-	getDomainUrl,
-	getUserImgSrc,
-	invariantResponse,
-} from './utils/misc.tsx'
-import { useNonce } from './utils/nonce-provider.ts'
-import { useRequestInfo } from './utils/request-info.ts'
-import { type Theme, setTheme, getTheme } from './utils/theme.server.ts'
-import { makeTimings, time } from './utils/timing.server.ts'
-import { getToast } from './utils/toast.server.ts'
-import { useOptionalUser, useUser } from './utils/user.ts'
+import { Links } from '@remix-run/react'
+import { href as iconsHref } from './components/ui/icon.tsx'
+import { type LinksFunction } from '@remix-run/node'
 
-import { WeatherExample } from './components/WeatherExample.tsx'
 import { CaseSummary } from './components/CaseSummary.tsx'
-import type { Weather } from './WeatherExample.d.ts'
-
-import * as pyodideModule from 'pyodide'
-import engine from '../../rules-engine/src/rules_engine/engine.py'
-
 import './App.css'
 
-const getPyodide = async () => {
-	// public folder:
-	return await pyodideModule.loadPyodide({
-		indexURL: 'pyodide-env/',
-	})
-}
-
-const runPythonScript = async () => {
-	const pyodide: any = await getPyodide()
-	// console.log(engine);
-	await pyodide.loadPackage('numpy')
-	await pyodide.runPythonAsync(engine)
-	return pyodide
-}
-
 export const links: LinksFunction = () => {
-	return [
-		// Preload svg sprite as a resource to avoid render blocking
-		{ rel: 'preload', href: iconsHref, as: 'image' },
-		// Preload CSS as a resource to avoid render blocking
-		{ rel: 'preload', href: fontStyleSheetUrl, as: 'style' },
-		{ rel: 'preload', href: tailwindStyleSheetUrl, as: 'style' },
-		cssBundleHref ? { rel: 'preload', href: cssBundleHref, as: 'style' } : null,
-		{ rel: 'mask-icon', href: '/favicons/mask-icon.svg' },
-		{
-			rel: 'alternate icon',
-			type: 'image/png',
-			href: '/favicons/favicon-32x32.png',
-		},
-		{ rel: 'apple-touch-icon', href: '/favicons/apple-touch-icon.png' },
-		{
-			rel: 'manifest',
-			href: '/site.webmanifest',
-			crossOrigin: 'use-credentials',
-		} as const, // necessary to make typescript happy
-		//These should match the css preloads above to avoid css as render blocking resource
-		{ rel: 'icon', type: 'image/svg+xml', href: '/favicons/favicon.svg' },
-		{ rel: 'stylesheet', href: fontStyleSheetUrl },
-		{ rel: 'stylesheet', href: tailwindStyleSheetUrl },
-		cssBundleHref ? { rel: 'stylesheet', href: cssBundleHref } : null,
-	].filter(Boolean)
-}
-
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
-	return [
-		{ title: data ? 'Epic Notes' : 'Error | Epic Notes' },
-		{ name: 'description', content: `Your own captain's log` },
-	]
-}
-
-// We can only have one `loader()`. More requires special gymnastics.
-export async function loader({ request }: DataFunctionArgs) {
-	const timings = makeTimings('root loader')
-	const userId = await time(() => getUserId(request), {
-		timings,
-		type: 'getUserId',
-		desc: 'getUserId in root',
-	})
-
-	const user = userId
-		? await time(
-				() =>
-					prisma.user.findUniqueOrThrow({
-						select: {
-							id: true,
-							name: true,
-							username: true,
-							image: { select: { id: true } },
-							roles: {
-								select: {
-									name: true,
-									permissions: {
-										select: { entity: true, action: true, access: true },
-									},
-								},
-							},
-						},
-						where: { id: userId },
-					}),
-				{ timings, type: 'find user', desc: 'find user in root' },
-		  )
-		: null
-	if (userId && !user) {
-		console.info('something weird happened')
-		// something weird happened... The user is authenticated but we can't find
-		// them in the database. Maybe they were deleted? Let's log them out.
-		await authenticator.logout(request, { redirectTo: '/' })
-	}
-	const { toast, headers: toastHeaders } = await getToast(request)
-	const { confettiId, headers: confettiHeaders } = getConfetti(request)
-
-	// Weather station data
-	const w_href: string =
-		'https://archive-api.open-meteo.com/v1/archive?latitude=52.52&longitude=13.41&daily=temperature_2m_max&timezone=America%2FNew_York&start_date=2022-01-01&end_date=2023-08-30&temperature_unit=fahrenheit'
-	const w_res: Response = await fetch(w_href)
-	const weather: Weather = (await w_res.json()) as Weather
-
-	return json(
-		{
-			weather: weather,
-			user,
-			requestInfo: {
-				hints: getHints(request),
-				origin: getDomainUrl(request),
-				path: new URL(request.url).pathname,
-				userPrefs: {
-					theme: getTheme(request),
-				},
-			},
-			ENV: getEnv(),
-			toast,
-			confettiId,
-		},
-		{
-			headers: combineHeaders(
-				{ 'Server-Timing': timings.toString() },
-				toastHeaders,
-				confettiHeaders,
-			),
-		},
-	)
-}
-
-export const headers: HeadersFunction = ({ loaderHeaders }) => {
-	const headers = {
-		'Server-Timing': loaderHeaders.get('Server-Timing') ?? '',
-	}
-	return headers
-}
-
-const ThemeFormSchema = z.object({
-	theme: z.enum(['system', 'light', 'dark']),
-})
-
-export async function action({ request }: DataFunctionArgs) {
-	const formData = await request.formData()
-	invariantResponse(
-		formData.get('intent') === 'update-theme',
-		'Invalid intent',
-		{ status: 400 },
-	)
-	const submission = parse(formData, {
-		schema: ThemeFormSchema,
-	})
-	if (submission.intent !== 'submit') {
-		return json({ status: 'success', submission } as const)
-	}
-	if (!submission.value) {
-		return json({ status: 'error', submission } as const, { status: 400 })
-	}
-	const { theme } = submission.value
-
-	const responseInit = {
-		headers: { 'set-cookie': setTheme(theme) },
-	}
-	return json({ success: true, submission }, responseInit)
-}
-
-function Document({
-	children,
-	nonce,
-	theme = 'light',
-	env = {},
-}: {
-	children: React.ReactNode
-	nonce: string
-	theme?: Theme
-	env?: Record<string, string>
-}) {
-	const [output, setOutput] = useState<string | null>('(loading python...)')
-
-	useEffect(() => {
-		const run = async () => {
-			const pyodide: any = await runPythonScript()
-			//   console.log(pyodide);
-			const result = await pyodide.runPythonAsync('hdd(57, 60)')
-			setOutput(result)
-		}
-		run()
-	}, [])
-	return (
-		<html lang="en" className={`${theme} h-full overflow-x-hidden`}>
-			<head>
-				<ClientHintCheck nonce={nonce} />
-				<Meta />
-				<meta charSet="utf-8" />
-				<meta name="viewport" content="width=device-width,initial-scale=1" />
-				<Links />
-			</head>
-			<body className="bg-background text-foreground">
-				{/* <div>
-					<div>Output:</div>
-					{output}
-				</div> */}
-				{/* <WeatherExample /> */}
-				{children}
-				<script
-					nonce={nonce}
-					dangerouslySetInnerHTML={{
-						__html: `window.ENV = ${JSON.stringify(env)}`,
-					}}
-				/>
-				<ScrollRestoration nonce={nonce} />
-				<Scripts nonce={nonce} />
-				<LiveReload nonce={nonce} />
-			</body>
-		</html>
-	)
-}
-
-function App() {
-	const data = useLoaderData<typeof loader>()
-	const nonce = useNonce()
-	const user = useOptionalUser()
-	const theme = useTheme()
-	const matches = useMatches()
-	const isOnSearchPage = matches.find(m => m.id === 'routes/users+/index')
-
-	return (
-		<Document nonce={nonce} theme={theme} env={data.ENV}>
-			<CaseSummary />
-			<div className="flex-1">
-				<Outlet />
-			</div>
-			<div className="flex h-screen flex-col justify-between">
-				<header className="container py-6">
-					<nav className="flex items-center justify-between">
-						{/* <Link to="/">
-							<div className="font-light">epic</div>
-							<div className="font-bold">notes</div>
-						</Link>
-						{isOnSearchPage ? null : (
-							<div className="ml-auto max-w-sm flex-1 pr-10">
-								<SearchBar status="idle" />
-							</div>
-						)}
-						<div className="flex items-center gap-10">
-							{user ? (
-								<UserDropdown />
-							) : (
-								<Button asChild variant="default" size="sm">
-									<Link to="/login">Log In</Link>
-								</Button>
-							)}
-						</div> */}
-					</nav>
-				</header>
-
-				<div className="container flex justify-between pb-5">
-					<Link to="/">
-						<div className="font-light">epic</div>
-						<div className="font-bold">notes</div>
-					</Link>
-					<ThemeSwitch userPreference={data.requestInfo.userPrefs.theme} />
-				</div>
-			</div>
-			<Confetti id={data.confettiId} />
-			<EpicToaster toast={data.toast} />
-		</Document>
-	)
-}
-export default withSentry(App)
-
-function UserDropdown() {
-	const user = useUser()
-	const submit = useSubmit()
-	const formRef = useRef<HTMLFormElement>(null)
-	return (
-		<DropdownMenu>
-			<DropdownMenuTrigger asChild>
-				<Button asChild variant="secondary">
-					<Link
-						to={`/users/${user.username}`}
-						// this is for progressive enhancement
-						onClick={e => e.preventDefault()}
-						className="flex items-center gap-2"
-					>
-						<img
-							className="h-8 w-8 rounded-full object-cover"
-							alt={user.name ?? user.username}
-							src={getUserImgSrc(user.image?.id)}
-						/>
-						<span className="text-body-sm font-bold">
-							{user.name ?? user.username}
-						</span>
-					</Link>
-				</Button>
-			</DropdownMenuTrigger>
-			<DropdownMenuPortal>
-				<DropdownMenuContent sideOffset={8} align="start">
-					<DropdownMenuItem asChild>
-						<Link prefetch="intent" to={`/users/${user.username}`}>
-							<Icon className="text-body-md" name="avatar">
-								Profile
-							</Icon>
-						</Link>
-					</DropdownMenuItem>
-					<DropdownMenuItem asChild>
-						<Link prefetch="intent" to={`/users/${user.username}/notes`}>
-							<Icon className="text-body-md" name="pencil-2">
-								Notes
-							</Icon>
-						</Link>
-					</DropdownMenuItem>
-					<DropdownMenuItem
-						asChild
-						// this prevents the menu from closing before the form submission is completed
-						onSelect={event => {
-							event.preventDefault()
-							submit(formRef.current)
-						}}
-					>
-						<Form action="/logout" method="POST" ref={formRef}>
-							<Icon className="text-body-md" name="exit">
-								<button type="submit">Logout</button>
-							</Icon>
-						</Form>
-					</DropdownMenuItem>
-				</DropdownMenuContent>
-			</DropdownMenuPortal>
-		</DropdownMenu>
-	)
-}
-
-/**
- * @returns the user's theme preference, or the client hint theme if the user
- * has not set a preference.
- */
-export function useTheme() {
-	const hints = useHints()
-	const requestInfo = useRequestInfo()
-	const optimisticMode = useOptimisticThemeMode()
-	if (optimisticMode) {
-		return optimisticMode === 'system' ? hints.theme : optimisticMode
-	}
-	return requestInfo.userPrefs.theme ?? hints.theme
-}
-
-/**
- * If the user's changing their theme mode preference, this will return the
- * value it's being changed to.
- */
-export function useOptimisticThemeMode() {
-	const fetchers = useFetchers()
-
-	const themeFetcher = fetchers.find(
-		f => f.formData?.get('intent') === 'update-theme',
-	)
-
-	if (themeFetcher && themeFetcher.formData) {
-		const submission = parse(themeFetcher.formData, {
-			schema: ThemeFormSchema,
-		})
-		return submission.value?.theme
-	}
-}
-
-function ThemeSwitch({ userPreference }: { userPreference?: Theme | null }) {
-	const fetcher = useFetcher<typeof action>()
-
-	const [form] = useForm({
-		id: 'theme-switch',
-		lastSubmission: fetcher.data?.submission,
-		onValidate({ formData }) {
-			return parse(formData, { schema: ThemeFormSchema })
-		},
-	})
-
-	const optimisticMode = useOptimisticThemeMode()
-	const mode = optimisticMode ?? userPreference ?? 'system'
-	const nextMode =
-		mode === 'system' ? 'light' : mode === 'light' ? 'dark' : 'system'
-	const modeLabel = {
-		light: (
-			<Icon name="sun">
-				<span className="sr-only">Light</span>
-			</Icon>
-		),
-		dark: (
-			<Icon name="moon">
-				<span className="sr-only">Dark</span>
-			</Icon>
-		),
-		system: (
-			<Icon name="laptop">
-				<span className="sr-only">System</span>
-			</Icon>
-		),
-	}
-
-	return (
-		<fetcher.Form method="POST" {...form.props}>
-			<input type="hidden" name="theme" value={nextMode} />
-			<div className="flex gap-2">
-				<button
-					name="intent"
-					value="update-theme"
-					type="submit"
-					className="flex h-8 w-8 cursor-pointer items-center justify-center"
-				>
-					{modeLabel[mode]}
-				</button>
-			</div>
-			<ErrorList errors={form.errors} id={form.errorId} />
-		</fetcher.Form>
-	)
-}
-
-export function ErrorBoundary() {
-	// the nonce doesn't rely on the loader so we can access that
-	const nonce = useNonce()
-
-	// NOTE: you cannot use useLoaderData in an ErrorBoundary because the loader
-	// likely failed to run so we have to do the best we can.
-	// We could probably do better than this (it's possible the loader did run).
-	// This would require a change in Remix.
-
-	// Just make sure your root route never errors out and you'll always be able
-	// to give the user a better UX.
-
-	return (
-		<Document nonce={nonce}>
-			<GeneralErrorBoundary />
-		</Document>
-	)
-}
+    return [
+        // Preload svg sprite as a resource to avoid render blocking
+        { rel: 'preload', href: iconsHref, as: 'image' },
+        // Preload CSS as a resource to avoid render blocking
+        { rel: 'preload', href: fontStyleSheetUrl, as: 'style' },
+        { rel: 'preload', href: tailwindStyleSheetUrl, as: 'style' },
+        cssBundleHref ? { rel: 'preload', href: cssBundleHref, as: 'style' } : null,
+        { rel: 'mask-icon', href: '/favicons/mask-icon.svg' },
+        {
+            rel: 'alternate icon',
+            type: 'image/png',
+            href: '/favicons/favicon-32x32.png',
+        },
+        { rel: 'apple-touch-icon', href: '/favicons/apple-touch-icon.png' },
+        {
+            rel: 'manifest',
+            href: '/site.webmanifest',
+            crossOrigin: 'use-credentials',
+        } as const, // necessary to make typescript happy
+        //These should match the css preloads above to avoid css as render blocking resource
+        { rel: 'icon', type: 'image/svg+xml', href: '/favicons/favicon.svg' },
+        { rel: 'stylesheet', href: fontStyleSheetUrl },
+        { rel: 'stylesheet', href: tailwindStyleSheetUrl },
+        cssBundleHref ? { rel: 'stylesheet', href: cssBundleHref } : null,
+    ].filter(Boolean)
+}
+
+export default function HeatStack() {
+    return (
+        <html lang="en" className={`${'light'} h-full overflow-x-hidden`}>
+            <head>
+                <meta charSet="utf-8" />
+                <meta name="viewport" content="width=device-width,initial-scale=1" />
+                <Links />
+            </head>
+            <body className="bg-background text-foreground">
+                <CaseSummary />
+            </body>
+        </html>
+    )
+}
+
+
+// npx shadcn-ui@latest add table
+// npx shadcn-ui@latest add checkbox
diff --git a/heat-stack/app/root_original.tsx b/heat-stack/app/root_original.tsx
new file mode 100644
index 00000000..b8376b2d
--- /dev/null
+++ b/heat-stack/app/root_original.tsx
@@ -0,0 +1,501 @@
+import { useForm } from '@conform-to/react'
+import { parse } from '@conform-to/zod'
+import { cssBundleHref } from '@remix-run/css-bundle'
+import {
+	json,
+	type DataFunctionArgs,
+	type HeadersFunction,
+	type LinksFunction,
+	type MetaFunction,
+} from '@remix-run/node'
+import {
+	Form,
+	Link,
+	Links,
+	LiveReload,
+	Meta,
+	Outlet,
+	Scripts,
+	ScrollRestoration,
+	useFetcher,
+	useFetchers,
+	useLoaderData,
+	useMatches,
+	useSubmit,
+} from '@remix-run/react'
+import { withSentry } from '@sentry/remix'
+import { Suspense, lazy, useEffect, useRef, useState } from 'react'
+import { object, z } from 'zod'
+import { Confetti } from './components/confetti.tsx'
+import { GeneralErrorBoundary } from './components/error-boundary.tsx'
+import { ErrorList } from './components/forms.tsx'
+import { SearchBar } from './components/search-bar.tsx'
+import { EpicToaster } from './components/toaster.tsx'
+import { Button } from './components/ui/button.tsx'
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuPortal,
+	DropdownMenuTrigger,
+} from './components/ui/dropdown-menu.tsx'
+import { Icon, href as iconsHref } from './components/ui/icon.tsx'
+import fontStyleSheetUrl from './styles/font.css'
+import tailwindStyleSheetUrl from './styles/tailwind.css'
+import { authenticator, getUserId } from './utils/auth.server.ts'
+import { ClientHintCheck, getHints, useHints } from './utils/client-hints.tsx'
+import { getConfetti } from './utils/confetti.server.ts'
+import { prisma } from './utils/db.server.ts'
+import { getEnv } from './utils/env.server.ts'
+import {
+	combineHeaders,
+	getDomainUrl,
+	getUserImgSrc,
+	invariantResponse,
+} from './utils/misc.tsx'
+import { useNonce } from './utils/nonce-provider.ts'
+import { useRequestInfo } from './utils/request-info.ts'
+import { type Theme, setTheme, getTheme } from './utils/theme.server.ts'
+import { makeTimings, time } from './utils/timing.server.ts'
+import { getToast } from './utils/toast.server.ts'
+import { useOptionalUser, useUser } from './utils/user.ts'
+
+import { WeatherExample } from './components/WeatherExample.tsx'
+import type { Weather } from './WeatherExample.d.ts';
+
+import * as pyodideModule from 'pyodide'
+import engine from '../../rules-engine/src/rules_engine/engine.py';
+
+const getPyodide = async () => {
+	// public folder:
+	return await pyodideModule.loadPyodide({
+		indexURL: 'pyodide-env/',
+	})
+}
+declare global {
+	interface Window {
+	  pydd?: any;
+	}
+  }
+  
+const runPythonScript = async () => {
+	const pyodide: any = await getPyodide();
+	// console.log(engine);
+	await pyodide.loadPackage("numpy")
+	await pyodide.runPythonAsync(engine);
+	window.pydd = pyodide as null;
+
+	return pyodide;
+};
+
+
+export const links: LinksFunction = () => {
+	return [
+		// Preload svg sprite as a resource to avoid render blocking
+		{ rel: 'preload', href: iconsHref, as: 'image' },
+		// Preload CSS as a resource to avoid render blocking
+		{ rel: 'preload', href: fontStyleSheetUrl, as: 'style' },
+		{ rel: 'preload', href: tailwindStyleSheetUrl, as: 'style' },
+		cssBundleHref ? { rel: 'preload', href: cssBundleHref, as: 'style' } : null,
+		{ rel: 'mask-icon', href: '/favicons/mask-icon.svg' },
+		{
+			rel: 'alternate icon',
+			type: 'image/png',
+			href: '/favicons/favicon-32x32.png',
+		},
+		{ rel: 'apple-touch-icon', href: '/favicons/apple-touch-icon.png' },
+		{
+			rel: 'manifest',
+			href: '/site.webmanifest',
+			crossOrigin: 'use-credentials',
+		} as const, // necessary to make typescript happy
+		//These should match the css preloads above to avoid css as render blocking resource
+		{ rel: 'icon', type: 'image/svg+xml', href: '/favicons/favicon.svg' },
+		{ rel: 'stylesheet', href: fontStyleSheetUrl },
+		{ rel: 'stylesheet', href: tailwindStyleSheetUrl },
+		cssBundleHref ? { rel: 'stylesheet', href: cssBundleHref } : null,
+	].filter(Boolean)
+}
+
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+	return [
+		{ title: data ? 'Epic Notes' : 'Error | Epic Notes' },
+		{ name: 'description', content: `Your own captain's log` },
+	]
+}
+
+// We can only have one `loader()`. More requires special gymnastics.
+export async function loader({ request }: DataFunctionArgs) {
+	const timings = makeTimings('root loader')
+	const userId = await time(() => getUserId(request), {
+		timings,
+		type: 'getUserId',
+		desc: 'getUserId in root',
+	})
+
+	const user = userId
+		? await time(
+				() =>
+					prisma.user.findUniqueOrThrow({
+						select: {
+							id: true,
+							name: true,
+							username: true,
+							image: { select: { id: true } },
+							roles: {
+								select: {
+									name: true,
+									permissions: {
+										select: { entity: true, action: true, access: true },
+									},
+								},
+							},
+						},
+						where: { id: userId },
+					}),
+				{ timings, type: 'find user', desc: 'find user in root' },
+		  )
+		: null
+	if (userId && !user) {
+		console.info('something weird happened')
+		// something weird happened... The user is authenticated but we can't find
+		// them in the database. Maybe they were deleted? Let's log them out.
+		await authenticator.logout(request, { redirectTo: '/' })
+	}
+	const { toast, headers: toastHeaders } = await getToast(request)
+	const { confettiId, headers: confettiHeaders } = getConfetti(request)
+
+	// Weather station data
+	const w_href: string = 'https://archive-api.open-meteo.com/v1/archive?latitude=52.52&longitude=13.41&daily=temperature_2m_max&timezone=America%2FNew_York&start_date=2022-01-01&end_date=2023-08-30&temperature_unit=fahrenheit';
+	const w_res: Response = await fetch(w_href);
+	const weather: Weather = (await w_res.json()) as Weather
+
+	return json(
+		{
+			weather: weather,
+			user,
+			requestInfo: {
+				hints: getHints(request),
+				origin: getDomainUrl(request),
+				path: new URL(request.url).pathname,
+				userPrefs: {
+					theme: getTheme(request),
+				},
+			},
+			ENV: getEnv(),
+			toast,
+			confettiId,
+		},
+		{
+			headers: combineHeaders(
+				{ 'Server-Timing': timings.toString() },
+				toastHeaders,
+				confettiHeaders,
+			),
+		},
+	)
+}
+
+export const headers: HeadersFunction = ({ loaderHeaders }) => {
+	const headers = {
+		'Server-Timing': loaderHeaders.get('Server-Timing') ?? '',
+	}
+	return headers
+}
+
+const ThemeFormSchema = z.object({
+	theme: z.enum(['system', 'light', 'dark']),
+})
+
+export async function action({ request }: DataFunctionArgs) {
+	const formData = await request.formData()
+	invariantResponse(
+		formData.get('intent') === 'update-theme',
+		'Invalid intent',
+		{ status: 400 },
+	)
+	const submission = parse(formData, {
+		schema: ThemeFormSchema,
+	})
+	if (submission.intent !== 'submit') {
+		return json({ status: 'success', submission } as const)
+	}
+	if (!submission.value) {
+		return json({ status: 'error', submission } as const, { status: 400 })
+	}
+	const { theme } = submission.value
+
+	const responseInit = {
+		headers: { 'set-cookie': setTheme(theme) },
+	}
+	return json({ success: true, submission }, responseInit)
+}
+
+function Document({
+	children,
+	nonce,
+	theme = 'light',
+	env = {},
+}: {
+	children: React.ReactNode
+	nonce: string
+	theme?: Theme
+	env?: Record<string, string>
+}) {
+	// const [output, setOutput] = useState<string | null>('(loading python...)');
+
+	// useEffect(() => {
+	// 	const run = async () => {
+	// 	  const pyodide: any = await runPythonScript();
+	// 	//   console.log(pyodide);
+	// 	  const result = await pyodide.runPythonAsync("hdd(57, 60)");
+	// 	  setOutput(result);
+	// 	};
+	// 	run();
+	//   }, []);
+	return (
+		<html lang="en" className={`${theme} h-full overflow-x-hidden`}>
+			<head>
+				<ClientHintCheck nonce={nonce} />
+				<Meta />
+				<meta charSet="utf-8" />
+				<meta name="viewport" content="width=device-width,initial-scale=1" />
+				<Links />
+			</head>
+			<body className="bg-background text-foreground">
+			<div>
+                <div>Output:</div>
+                {/* {output} */}
+            </div>
+                <WeatherExample />
+                {children}
+                <script
+                    nonce={nonce}
+                    dangerouslySetInnerHTML={{
+                        __html: `window.ENV = ${JSON.stringify(env)}`,
+                    }}
+                />
+                <ScrollRestoration nonce={nonce} />
+                <Scripts nonce={nonce} />
+                <LiveReload nonce={nonce} />
+			</body>
+		</html>
+	)
+}
+
+function App() {
+	const data = useLoaderData<typeof loader>()
+	const nonce = useNonce()
+	const user = useOptionalUser()
+	const theme = useTheme()
+	const matches = useMatches()
+	const isOnSearchPage = matches.find(m => m.id === 'routes/users+/index')
+
+	return (
+		<Document nonce={nonce} theme={theme} env={data.ENV}>
+			<div className="flex h-screen flex-col justify-between">
+				<header className="container py-6">
+					<nav className="flex items-center justify-between">
+						<Link to="/">
+							<div className="font-light">epic</div>
+							<div className="font-bold">notes</div>
+						</Link>
+						{isOnSearchPage ? null : (
+							<div className="ml-auto max-w-sm flex-1 pr-10">
+								<SearchBar status="idle" />
+							</div>
+						)}
+						<div className="flex items-center gap-10">
+							{user ? (
+								<UserDropdown />
+							) : (
+								<Button asChild variant="default" size="sm">
+									<Link to="/login">Log In</Link>
+								</Button>
+							)}
+						</div>
+					</nav>
+				</header>
+
+				<div className="flex-1">
+					<Outlet />
+				</div>
+
+				<div className="container flex justify-between pb-5">
+					<Link to="/">
+						<div className="font-light">epic</div>
+						<div className="font-bold">notes</div>
+					</Link>
+					<ThemeSwitch userPreference={data.requestInfo.userPrefs.theme} />
+				</div>
+			</div>
+			<Confetti id={data.confettiId} />
+			<EpicToaster toast={data.toast} />
+		</Document>
+	)
+}
+export default withSentry(App)
+
+function UserDropdown() {
+	const user = useUser()
+	const submit = useSubmit()
+	const formRef = useRef<HTMLFormElement>(null)
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button asChild variant="secondary">
+					<Link
+						to={`/users/${user.username}`}
+						// this is for progressive enhancement
+						onClick={e => e.preventDefault()}
+						className="flex items-center gap-2"
+					>
+						<img
+							className="h-8 w-8 rounded-full object-cover"
+							alt={user.name ?? user.username}
+							src={getUserImgSrc(user.image?.id)}
+						/>
+						<span className="text-body-sm font-bold">
+							{user.name ?? user.username}
+						</span>
+					</Link>
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuPortal>
+				<DropdownMenuContent sideOffset={8} align="start">
+					<DropdownMenuItem asChild>
+						<Link prefetch="intent" to={`/users/${user.username}`}>
+							<Icon className="text-body-md" name="avatar">
+								Profile
+							</Icon>
+						</Link>
+					</DropdownMenuItem>
+					<DropdownMenuItem asChild>
+						<Link prefetch="intent" to={`/users/${user.username}/notes`}>
+							<Icon className="text-body-md" name="pencil-2">
+								Notes
+							</Icon>
+						</Link>
+					</DropdownMenuItem>
+					<DropdownMenuItem
+						asChild
+						// this prevents the menu from closing before the form submission is completed
+						onSelect={event => {
+							event.preventDefault()
+							submit(formRef.current)
+						}}
+					>
+						<Form action="/logout" method="POST" ref={formRef}>
+							<Icon className="text-body-md" name="exit">
+								<button type="submit">Logout</button>
+							</Icon>
+						</Form>
+					</DropdownMenuItem>
+				</DropdownMenuContent>
+			</DropdownMenuPortal>
+		</DropdownMenu>
+	)
+}
+
+/**
+ * @returns the user's theme preference, or the client hint theme if the user
+ * has not set a preference.
+ */
+export function useTheme() {
+	const hints = useHints()
+	const requestInfo = useRequestInfo()
+	const optimisticMode = useOptimisticThemeMode()
+	if (optimisticMode) {
+		return optimisticMode === 'system' ? hints.theme : optimisticMode
+	}
+	return requestInfo.userPrefs.theme ?? hints.theme
+}
+
+/**
+ * If the user's changing their theme mode preference, this will return the
+ * value it's being changed to.
+ */
+export function useOptimisticThemeMode() {
+	const fetchers = useFetchers()
+
+	const themeFetcher = fetchers.find(
+		f => f.formData?.get('intent') === 'update-theme',
+	)
+
+	if (themeFetcher && themeFetcher.formData) {
+		const submission = parse(themeFetcher.formData, {
+			schema: ThemeFormSchema,
+		})
+		return submission.value?.theme
+	}
+}
+
+function ThemeSwitch({ userPreference }: { userPreference?: Theme | null }) {
+	const fetcher = useFetcher<typeof action>()
+
+	const [form] = useForm({
+		id: 'theme-switch',
+		lastSubmission: fetcher.data?.submission,
+		onValidate({ formData }) {
+			return parse(formData, { schema: ThemeFormSchema })
+		},
+	})
+
+	const optimisticMode = useOptimisticThemeMode()
+	const mode = optimisticMode ?? userPreference ?? 'system'
+	const nextMode =
+		mode === 'system' ? 'light' : mode === 'light' ? 'dark' : 'system'
+	const modeLabel = {
+		light: (
+			<Icon name="sun">
+				<span className="sr-only">Light</span>
+			</Icon>
+		),
+		dark: (
+			<Icon name="moon">
+				<span className="sr-only">Dark</span>
+			</Icon>
+		),
+		system: (
+			<Icon name="laptop">
+				<span className="sr-only">System</span>
+			</Icon>
+		),
+	}
+
+	return (
+		<fetcher.Form method="POST" {...form.props}>
+			<input type="hidden" name="theme" value={nextMode} />
+			<div className="flex gap-2">
+				<button
+					name="intent"
+					value="update-theme"
+					type="submit"
+					className="flex h-8 w-8 cursor-pointer items-center justify-center"
+				>
+					{modeLabel[mode]}
+				</button>
+			</div>
+			<ErrorList errors={form.errors} id={form.errorId} />
+		</fetcher.Form>
+	)
+}
+
+export function ErrorBoundary() {
+	// the nonce doesn't rely on the loader so we can access that
+	const nonce = useNonce()
+
+	// NOTE: you cannot use useLoaderData in an ErrorBoundary because the loader
+	// likely failed to run so we have to do the best we can.
+	// We could probably do better than this (it's possible the loader did run).
+	// This would require a change in Remix.
+
+	// Just make sure your root route never errors out and you'll always be able
+	// to give the user a better UX.
+
+	return (
+		<Document nonce={nonce}>
+			<GeneralErrorBoundary />
+		</Document>
+	)
+}