From 46644428fcaa6246f99c3fac4bde89141a60df0d Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Wed, 29 Jul 2026 01:35:34 +0700
Subject: [PATCH] feat: integrate FlashToast component and update Toaster usage

- Added FlashToast component to manage flash notifications.
- Updated app layout to include the Toaster component for displaying notifications.
- Refactored Sonner component to remove theme dependency.
---
 resources/js/app.tsx                    | 2 ++
 resources/js/components/flash-toast.tsx | 7 +++++++
 resources/js/components/ui/sonner.tsx   | 6 ------
 resources/js/layouts/app-layout.tsx     | 2 ++
 4 files changed, 11 insertions(+), 6 deletions(-)
 create mode 100644 resources/js/components/flash-toast.tsx

diff --git a/resources/js/app.tsx b/resources/js/app.tsx
index 402353f..67cdae8 100644
--- a/resources/js/app.tsx
+++ b/resources/js/app.tsx
@@ -1,6 +1,7 @@
 import { createInertiaApp } from '@inertiajs/react';
 import { Toaster } from '@/components/ui/sonner';
 import { TooltipProvider } from '@/components/ui/tooltip';
+import { FlashToast } from '@/components/flash-toast';
 import { initializeTheme } from '@/hooks/use-appearance';
 import AppLayout from '@/layouts/app-layout';
 import AuthLayout from '@/layouts/auth-layout';
@@ -26,6 +27,7 @@ createInertiaApp({
     withApp(app) {
         return (
             <TooltipProvider delayDuration={0}>
+                <FlashToast />
                 {app}
                 <Toaster />
             </TooltipProvider>
diff --git a/resources/js/components/flash-toast.tsx b/resources/js/components/flash-toast.tsx
new file mode 100644
index 0000000..6534edc
--- /dev/null
+++ b/resources/js/components/flash-toast.tsx
@@ -0,0 +1,7 @@
+import { useFlashToast } from '@/hooks/use-flash-toast';
+
+export function FlashToast() {
+    useFlashToast();
+
+    return null;
+}
diff --git a/resources/js/components/ui/sonner.tsx b/resources/js/components/ui/sonner.tsx
index 9280ee5..6bb1261 100644
--- a/resources/js/components/ui/sonner.tsx
+++ b/resources/js/components/ui/sonner.tsx
@@ -1,15 +1,9 @@
-"use client"
-
-import { useTheme } from "next-themes"
 import { Toaster as Sonner, type ToasterProps } from "sonner"
 import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
-
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
       className="toaster group"
       icons={{
         success: (
diff --git a/resources/js/layouts/app-layout.tsx b/resources/js/layouts/app-layout.tsx
index 098b981..6ad0543 100644
--- a/resources/js/layouts/app-layout.tsx
+++ b/resources/js/layouts/app-layout.tsx
@@ -1,3 +1,4 @@
+import { Toaster } from '@/components/ui/sonner';
 import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';
 import type { BreadcrumbItem } from '@/types';
 
@@ -11,6 +12,7 @@ export default function AppLayout({
     return (
         <AppLayoutTemplate breadcrumbs={breadcrumbs}>
             {children}
+            <Toaster />
         </AppLayoutTemplate>
     );
 }