Flash notifications

Author: simonswiss

app/Http/Controllers/PuppyController.php

@@ -19,7 +19,6 @@ class PuppyController extends Controller
     public function index(Request $request)
     {
         $search = $request->search;
-
         return Inertia::render('puppies/index', [
             'puppies' => PuppyResource::collection(
                 Puppy::query()

app/Http/Middleware/HandleInertiaRequests.php

@@ -46,11 +46,16 @@ public function share(Request $request): array
             'auth' => [
                 'user' => $request->user(),
             ],
-            'ziggy' => fn (): array => [
+            'ziggy' => fn(): array => [
                 ...(new Ziggy)->toArray(),
                 'location' => $request->url(),
             ],
             'sidebarOpen' => ! $request->hasCookie('sidebar_state') || $request->cookie('sidebar_state') === 'true',
+            'flash' => [
+                'success' => $request->session()->get('success'),
+                'warning' => $request->session()->get('warning'),
+                'info' => $request->session()->get('info'),
+            ]
         ];
     }
 }

database/seeders/PuppySeeder.php

@@ -143,7 +143,7 @@ public function run(): void
         foreach ($puppies as $puppy) {
 
             // Optimize the image
-            $input = storage_path('app/public/puppies/' . $puppy['image']);
+            $input = base_path('seed-images/' . $puppy['image']);
             $optimized = $optimizer->handle($input);
 
             // Grab the path of the image

package-lock.json

@@ -50,9 +50,11 @@
         "laravel-vite-plugin": "^1.0",
         "lodash-es": "^4.17.21",
         "lucide-react": "^0.475.0",
+        "next-themes": "^0.4.6",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-error-boundary": "^6.0.0",
+        "sonner": "^2.0.7",
         "tailwind-merge": "^3.0.1",
         "tailwindcss": "^4.0.0",
         "tailwindcss-animate": "^1.0.7",

package.json

@@ -1,7 +1,22 @@
-export function PageWrapper({ children }) {
-  return (
-    <div className="min-h-dvh bg-gradient-to-b from-cyan-200 to-white to-[60vh]">
-      {children}
-    </div>
-  );
+import { Toaster } from '@/components/ui/sonner';
+import { SharedData } from '@/types';
+import { usePage } from '@inertiajs/react';
+import { toast } from 'sonner';
+
+export function PageWrapper({ children }: { children: React.ReactNode }) {
+    const { flash, errors } = usePage<SharedData>().props;
+    if (flash.success) toast.success(flash.success);
+    if (flash.warning) toast.warning(flash.warning);
+    if (flash.info) toast.info(flash.info);
+    if (errors) {
+        Object.values(errors).forEach((error) => {
+            toast.error(error);
+        });
+    }
+    return (
+        <>
+            <div className="min-h-dvh bg-gradient-to-b from-cyan-200 to-white to-[60vh]">{children}</div>
+            <Toaster position="top-center" richColors />
+        </>
+    );
 }

resources/js/components/PageWrapper.tsx

@@ -0,0 +1,23 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

resources/js/components/ui/sonner.tsx

@@ -28,6 +28,11 @@ export interface SharedData {
     auth: Auth;
     ziggy: Config & { location: string };
     sidebarOpen: boolean;
+    flash: {
+        success?: string;
+        warning?: string;
+        info?: string;
+    };
     [key: string]: unknown;
 }