Add PersistentLayout to fix duplicated flash messages

Author: skryukov

app/frontend/entrypoints/inertia.ts

@@ -3,6 +3,7 @@ import { type ReactNode, createElement } from "react"
 import { createRoot } from "react-dom/client"
 
 import { initializeTheme } from "@/hooks/use-appearance"
+import PersistentLayout from "@/layouts/persistent-layout"
 
 // Temporary type definition, until @inertiajs/react provides one
 interface ResolvedComponent {
@@ -30,7 +31,8 @@ void createInertiaApp({
     // and use the following line.
     // see https://inertia-rails.dev/guide/pages#default-layouts
     //
-    // page.default.layout ??= (page) => createElement(Layout, null, page)
+    page.default.layout ??= (page) =>
+      createElement(PersistentLayout, null, page)
 
     return page
   },

app/frontend/layouts/app-layout.tsx

@@ -1,7 +1,5 @@
 import type { ReactNode } from "react"
 
-import { Toaster } from "@/components/ui/sonner"
-import { useFlash } from "@/hooks/use-flash"
 import AppLayoutTemplate from "@/layouts/app/app-sidebar-layout"
 import type { BreadcrumbItem } from "@/types"
 
@@ -15,11 +13,9 @@ export default function AppLayout({
   breadcrumbs,
   ...props
 }: AppLayoutProps) {
-  useFlash()
   return (
     <AppLayoutTemplate breadcrumbs={breadcrumbs} {...props}>
       {children}
-      <Toaster richColors />
     </AppLayoutTemplate>
   )
 }

app/frontend/layouts/auth-layout.tsx

@@ -1,5 +1,5 @@
-import { Toaster } from "@/components/ui/sonner"
-import { useFlash } from "@/hooks/use-flash"
+import type { ReactNode } from "react"
+
 import AuthLayoutTemplate from "@/layouts/auth/auth-simple-layout"
 
 export default function AuthLayout({
@@ -8,15 +8,13 @@ export default function AuthLayout({
   description,
   ...props
 }: {
-  children: React.ReactNode
+  children: ReactNode
   title: string
   description: string
 }) {
-  useFlash()
   return (
     <AuthLayoutTemplate title={title} description={description} {...props}>
       {children}
-      <Toaster richColors />
     </AuthLayoutTemplate>
   )
 }

app/frontend/layouts/persistent-layout.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react"
+
+import { Toaster } from "@/components/ui/sonner"
+import { useFlash } from "@/hooks/use-flash"
+
+interface PersistentLayoutProps {
+  children: ReactNode
+}
+
+export default function PersistentLayout({ children }: PersistentLayoutProps) {
+  useFlash()
+  return (
+    <>
+      {children}
+      <Toaster richColors />
+    </>
+  )
+}

app/frontend/ssr/ssr.ts

@@ -3,6 +3,8 @@ import createServer from "@inertiajs/react/server"
 import { type ReactNode, createElement } from "react"
 import ReactDOMServer from "react-dom/server"
 
+import PersistentLayout from "@/layouts/persistent-layout"
+
 // Temporary type definition, until @inertiajs/react provides one
 interface ResolvedComponent {
   default: ReactNode & { layout?: (page: ReactNode) => ReactNode }
@@ -28,7 +30,8 @@ createServer((page) =>
       // and use the following line.
       // see https://inertia-rails.dev/guide/pages#default-layouts
       //
-      // page.default.layout ??= (page) => createElement(Layout, null, page)
+      page.default.layout ??= (page) =>
+        createElement(PersistentLayout, null, page)
 
       return page
     },