Changes from inertia project, loading fixes

src/App.vue

@@ -5,7 +5,7 @@ import { RouterView } from 'vue-router';
 <template>
     <!-- Use key to re-generate the page view component on each navigation :key="$route.path" -->
     <!-- Alteratively, use a watch() on each component to re-render dynamic data as needed -->
-    <Toast position="top-center" />
+    <Toast position="bottom-right" />
     <RouterView v-slot="{ Component }">
         <Suspense timeout="0">
             <template #default>

src/app.js

@@ -16,6 +16,7 @@ import PageTitleSection from '@/components/PageTitleSection.vue';
 
 import { useColorMode } from '@vueuse/core';
 import themePreset from '@/theme/noir-preset';
+import globalPt from './theme/global-pt';
 
 // Site light/dark mode
 const colorMode = useColorMode({ emitAuto: true });
@@ -37,6 +38,7 @@ app.provide('colorMode', colorMode)
                 },
             },
         },
+        pt: globalPt,
     })
     .use(ToastService)
     .component('Container', Container)

src/components/DeleteUserModal.vue

@@ -49,9 +49,9 @@ const deleteAccount = () => {
 <template>
     <Dialog
         v-model:visible="modalOpen"
+        class="w-[40rem]"
         position="center"
         header="Are you sure you want to delete your account?"
-        :style="{ width: '40rem' }"
         :draggable="false"
         dismissableMask
         modal

src/layouts/app/HeaderLayout.vue

@@ -72,6 +72,9 @@ const toggleMobileUserMenu = (event) => {
                     </div>
                 </template>
             </Drawer>
+            <ScrollTop
+                :buttonProps="{ class: 'fixed! right-4! bottom-4! md:right-8! md:bottom-8! z-[1000]!', rounded: true, raised: true }"
+            />
         </Teleport>
         <div class="min-h-screen">
             <!-- Primary Navigation Menu -->

src/layouts/app/SidebarLayout.vue

@@ -70,6 +70,9 @@ const toggleMobileUserMenu = (event) => {
                     </div>
                 </template>
             </Drawer>
+            <ScrollTop
+                :buttonProps="{ class: 'fixed! right-4! bottom-4! md:right-8! md:bottom-8! z-[1000]!', rounded: true, raised: true }"
+            />
         </Teleport>
 
         <!-- Mobile Header -->

src/theme/global-pt.js

@@ -0,0 +1,23 @@
+/**
+ * Global pass through styling for components
+ * https://primevue.org/passthrough/#global
+ */
+export default {
+    dialog: {
+        root: {
+            class: 'm-4 sm:m-0'
+        },
+        mask: {
+            class: 'backdrop-blur-xs'
+        },
+    },
+    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'
+        },
+    },
+};

src/views/auth/ForgotPassword.vue

@@ -30,7 +30,7 @@ const submit = () => {
 };
 
 const loading = computed(() => {
-    return submittingRequest.value || authStore.fetchingCsrfToken;
+    return submittingRequest.value || authStore.fetchingCsrfToken || authStore.fetchingUser;
 });
 
 onMounted(() => {

src/views/auth/Login.vue

@@ -43,7 +43,7 @@ const submit = () => {
 };
 
 const loading = computed(() => {
-    return loggingIn.value || authStore.fetchingCsrfToken;
+    return loggingIn.value || authStore.fetchingCsrfToken || authStore.fetchingUser;
 });
 
 onMounted(() => {

src/views/auth/Register.vue

@@ -33,7 +33,7 @@ const submit = () => {
 };
 
 const loading = computed(() => {
-    return registering.value || authStore.fetchingCsrfToken;
+    return registering.value || authStore.fetchingCsrfToken || authStore.fetchingUser;
 });
 
 onMounted(() => {

src/views/auth/ResetPassword.vue

@@ -45,7 +45,7 @@ const submit = () => {
 };
 
 const loading = computed(() => {
-    return resetting.value || authStore.fetchingCsrfToken;
+    return resetting.value || authStore.fetchingCsrfToken || authStore.fetchingUser;
 });
 
 onMounted(() => {