add flash message

apps/saladeaula.digital/app/routes/layout.tsx

@@ -3,6 +3,7 @@ import type { Route } from './+types/layout'
 import { useToggle } from 'ahooks'
 import { MenuIcon } from 'lucide-react'
 import { Link, NavLink, Outlet } from 'react-router'
+import { toast } from 'sonner'
 
 import { Toaster } from '@repo/ui/components/ui/sonner'
 import { userContext } from '@repo/auth/context'
@@ -23,12 +24,31 @@ import {
   SheetTrigger
 } from '@repo/ui/components/ui/sheet'
 import type { User } from '@repo/auth/auth'
+import { createSessionStorage } from '@repo/auth/session'
+import { data } from 'react-router'
+import { useEffect } from 'react'
 
 export const middleware: Route.MiddlewareFunction[] = [authMiddleware]
 
-export async function loader({ context }: Route.ActionArgs) {
+export async function loader({ context, request }: Route.ActionArgs) {
   const user = context.get(userContext) as User
-  return Response.json({ user })
+  const sessionStorage = createSessionStorage(context.cloudflare.env)
+  const session = await sessionStorage.getSession(request.headers.get('cookie'))
+
+  const flash = {
+    error: session.get('error'),
+    success: session.get('success'),
+    info: session.get('info')
+  }
+
+  return data(
+    { user, flash },
+    {
+      headers: new Headers({
+        'Set-Cookie': await sessionStorage.commitSession(session)
+      })
+    }
+  )
 }
 
 const navMain = [
@@ -47,10 +67,16 @@ const navMain = [
 ]
 
 export default function Component({
-  loaderData: { user }
+  loaderData: { user, flash }
 }: Route.ComponentProps) {
   const [isOpen, { toggle }] = useToggle()
 
+  useEffect(() => {
+    if (flash.error) toast.error(flash.error)
+    if (flash.success) toast.success(flash.success)
+    if (flash.info) toast.info(flash.info)
+  }, [flash])
+
   return (
     <div className="relative flex flex-col flex-1 min-w-0 h-full">
       <header