add support for toast messages

app/Http/Middleware/HandleInertiaRequests.php

@@ -4,6 +4,7 @@
 
 use Illuminate\Foundation\Inspiring;
 use Illuminate\Http\Request;
+use Illuminate\Support\Str;
 use Inertia\Middleware;
 
 class HandleInertiaRequests extends Middleware
@@ -42,9 +43,16 @@ public function share(Request $request): array
             ...parent::share($request),
             'name' => config('app.name'),
             'quote' => ['message' => trim($message), 'author' => trim($author)],
+            "response_uuid" => Str::uuid(),
             'auth' => [
                 'user' => $request->user(),
             ],
+            'flash' => [
+                'success' => fn() => $request->session()->get('success'),
+                'error'   => fn() => $request->session()->get('error'),
+                'info'   => fn() => $request->session()->get('info'),
+                'warning'   => fn() => $request->session()->get('warning'),
+            ],
             'sidebarOpen' => ! $request->hasCookie('sidebar_state') || $request->cookie('sidebar_state') === 'true',
         ];
     }

package.json

@@ -52,8 +52,10 @@
         "input-otp": "^1.4.2",
         "laravel-vite-plugin": "^2.0",
         "lucide-react": "^0.475.0",
+        "next-themes": "^0.4.6",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
+        "sonner": "^2.0.7",
         "tailwind-merge": "^3.0.1",
         "tailwindcss": "^4.0.0",
         "tw-animate-css": "^1.4.0",

resources/js/components/FlashMessageDisplayer.tsx

@@ -0,0 +1,35 @@
+import { usePage } from "@inertiajs/react";
+import React, { useEffect, useRef } from "react";
+import { toast } from "sonner";
+import { Toaster } from "@/components/ui/sonner";
+import { FlashMessages, SharedData } from "@/types";
+
+export default function FlashMessageDisplayer() {
+    const { props } = usePage<SharedData>();
+    const flash: FlashMessages = props.flash ?? {};
+    const responseUuid = props.response_uuid;
+
+    const lastUuidRef = useRef<string>("");
+
+    useEffect(() => {
+        // Avoid duplicate display
+        if (!responseUuid || lastUuidRef.current === responseUuid) return;
+
+        lastUuidRef.current = responseUuid;
+
+        if (flash.success) {
+            toast.success(flash.success, { className: "bg-white text-black" });
+        }
+        if (flash.error) {
+            toast.error(flash.error, { className: "bg-white text-black" });
+        }
+        if (flash.info) {
+            toast(flash.info, { className: "bg-white text-black" });
+        }
+        if (flash.warning) {
+            toast.warning(flash.warning, { className: "bg-white text-black" });
+        }
+    }, [responseUuid, flash]);
+
+    return <Toaster position="top-right" />;
+}

resources/js/components/ui/sonner.tsx

@@ -0,0 +1,38 @@
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

resources/js/layouts/app-layout.tsx

@@ -1,3 +1,4 @@
+import FlashMessageDisplayer from '@/components/FlashMessageDisplayer';
 import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';
 import { type BreadcrumbItem } from '@/types';
 import { type ReactNode } from 'react';
@@ -7,8 +8,13 @@ interface AppLayoutProps {
     breadcrumbs?: BreadcrumbItem[];
 }
 
-export default ({ children, breadcrumbs, ...props }: AppLayoutProps) => (
-    <AppLayoutTemplate breadcrumbs={breadcrumbs} {...props}>
-        {children}
-    </AppLayoutTemplate>
-);
+export default ({ children, breadcrumbs, ...props }: AppLayoutProps) => {
+
+
+    return (
+        <AppLayoutTemplate breadcrumbs={breadcrumbs} {...props}>
+            {children}
+            <FlashMessageDisplayer />
+        </AppLayoutTemplate>
+    )
+};

resources/js/types/index.d.ts

@@ -1,6 +1,13 @@
 import { InertiaLinkProps } from '@inertiajs/react';
 import { LucideIcon } from 'lucide-react';
 
+
+export interface FlashMessages {
+    success?: string | null;
+    error?: string | null;
+    info?: string | null;
+    warning?: string | null;
+}
 export interface Auth {
     user: User;
 }
@@ -28,6 +35,8 @@ export interface SharedData {
     auth: Auth;
     sidebarOpen: boolean;
     [key: string]: unknown;
+    flash?: FlashMessages;
+    response_uuid: string
 }
 
 export interface User {