fixes & improvements: toast global pt styles, better comments, cleanup

Author: connorabbas

bootstrap/app.php

@@ -62,11 +62,11 @@
                         ->toResponse($request)
                         ->setStatusCode($statusCode);
                 } else {
-                    // Return standard modal for easier debugging locally
+                    // Show standard modal for easier debugging locally
                     if (app()->isLocal() && $statusCode === 500) {
                         return $response;
                     }
-                    // Return JSON response for PrimeVue toast to display
+                    // Return JSON response for PrimeVue toast to display, handled by Inertia router event listener
                     $errorSummary = "$statusCode - $errorTitles[$statusCode]";
                     $errorDetail = $errorDetails[$statusCode];
                     if (get_class($exception) === ErrorToastException::class) {

resources/css/tailwind.css

@@ -6,6 +6,7 @@
 @source '../../storage/framework/views/*.php';
 @source '../../resources/views/**/*.blade.php';
 @source '../../resources/js/**/*.vue';
+@source '../../resources/js/theme/*.js';
 
 @custom-variant dark (&:where(.dark, .dark *));
 

resources/js/app.js

@@ -16,6 +16,7 @@ import PageTitleSection from '@/components/PageTitleSection.vue';
 
 import { useSiteColorMode } from '@/composables/useSiteColorMode';
 import themePreset from '@/theme/noir-preset';
+import globalPt from '@/theme/global-pt';
 
 /* global Ziggy */
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
@@ -44,7 +45,6 @@ createInertiaApp({
                             summary: responseBody.error_summary,
                             detail: responseBody.error_detail,
                             life: 5000,
-                            //styleClass: 'shadow-lg mb-0 mt-4 left-4 md:left-auto',
                         });
                     }
                 });
@@ -69,16 +69,7 @@ createInertiaApp({
                         },
                     },
                 },
-                pt: {
-                    toast: {
-                        root: {
-                            class: 'fixed left-4! right-4! bottom-4 md:left-auto! md:top-auto'
-                        },
-                        message: {
-                            class: 'shadow-lg mb-0 mt-4 w-full'
-                        },
-                    },
-                }
+                pt: globalPt,
             })
             .use(ToastService)
             .component('InertiaHead', Head)

resources/js/pages/settings/Profile.vue

@@ -39,7 +39,7 @@ const showSuccessToast = () => {
         severity: 'success',
         summary: 'Saved',
         detail: 'Profile information has been updated',
-        life: 120000,
+        life: 5000,
     });
 };
 const updateProfileInformation = () => {

resources/js/theme/global-pt.js

@@ -0,0 +1,15 @@
+/**
+ * Global pass through styling for components
+ * https://primevue.org/passthrough/#global
+ */
+export default {
+    toast: {
+        root: {
+            // Full width/centered on mobile, bottom right desktop
+            class: 'fixed! left-4! right-4! bottom-4! w-auto! md:right-8! md:bottom-8! sm:w-[25rem]! sm:not-fixed! sm:left-auto! sm:ml-auto!'
+        },
+        message: {
+            class: 'shadow-lg mb-0 mt-4'
+        },
+    },
+}