Basic route showing, without any auth

apps/webapp/app/components/Header.tsx

@@ -1,6 +1,6 @@
 import { DocumentTextIcon } from "@heroicons/react/24/solid";
 import { Link } from "@remix-run/react";
-import { useUser } from "~/utils";
+import { useOptionalUser } from "~/utils";
 import { Logo } from "./Logo";
 import { UserProfileMenu } from "./UserProfileMenu";
 
@@ -9,7 +9,7 @@ type HeaderProps = {
 };
 
 export function Header({ children }: HeaderProps) {
-  const user = useUser();
+  const user = useOptionalUser();
 
   return (
     <div className="flex w-full items-center border-b border-slate-200 bg-white py-1 px-2">

apps/webapp/app/routes/__app.tsx

@@ -1,18 +1,15 @@
-import { Outlet, useMatches } from "@remix-run/react";
+import { Outlet } from "@remix-run/react";
 import type { LoaderArgs } from "@remix-run/server-runtime";
-import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { typedjson } from "remix-typedjson";
 import type { UseDataFunctionReturn } from "remix-typedjson/dist/remix";
-import { Footer, Header } from "~/libraries/ui";
-import WorkspaceMenu from "~/libraries/ui/src/components/WorkspaceMenu";
-import { getWorkspaces } from "~/models/workspace.server";
+import { Header } from "~/components/Header";
 import { clearRedirectTo, commitSession } from "~/services/redirectTo.server";
-import { requireUserId } from "~/services/session.server";
 
 export type LoaderData = UseDataFunctionReturn<typeof loader>;
 
 export async function loader({ request }: LoaderArgs) {
   return typedjson(
-    {  },
+    {},
     {
       headers: {
         "Set-Cookie": await commitSession(await clearRedirectTo(request)),
@@ -22,12 +19,9 @@ export async function loader({ request }: LoaderArgs) {
 }
 
 export default function AppLayout() {
-  
   return (
     <div className="flex h-screen flex-col overflow-auto">
-      <header>
-        <h1>Root</h1>
-      </header>
+      <Header>Home</Header>
       <Outlet />
     </div>
   );

apps/webapp/app/routes/__app/index.tsx

@@ -0,0 +1,14 @@
+import type { LoaderArgs } from "@remix-run/server-runtime";
+import { typedjson } from "remix-typedjson";
+
+export const loader = async ({ request }: LoaderArgs) => {
+  return typedjson({});
+};
+
+export default function AppLayout() {
+  return (
+    <div className="flex h-screen flex-col overflow-auto">
+      adsadsdasasd asads asa dsa ds ads
+    </div>
+  );
+}