Implement Role Reset on Logout and Enhance AreaTabs Logic

- Added a resetRoles function in useActiveRole to clear user roles upon logout, ensuring a clean state.
- Updated UserMenu.vue to call resetRoles during logout for improved role management.
- Enhanced AreaTabs.vue to support multiple newly added tabs with staggered confetti animations, improving user engagement.
- Refactored logic to track newly added areas and their visibility, ensuring a smoother navigation experience.

app/composables/useActiveRole.ts

@@ -105,6 +105,17 @@ export function useActiveRole() {
     }
   }
 
+  /**
+   * Reset all role state (called on logout)
+   */
+  function resetRoles() {
+    activeRole.value = 'private'
+    roles.value = []
+    roleChangedByAdmin.value = false
+    loading.value = false
+    error.value = null
+  }
+
   /**
    * Get roles that user actually has (approved only)
    */
@@ -118,13 +129,21 @@ export function useActiveRole() {
   /**
    * Auto-fetch roles when user logs in
    * This ensures the role button shows the correct role immediately after login
-   * Uses callOnce to prevent redundant API calls
    */
   const { loggedIn } = useUserSession()
+
+  // Initial fetch if already logged in
   if (loggedIn.value) {
     callOnce('init-roles', () => fetchRoleStatus())
   }
 
+  // Watch for login changes - fetch roles when user logs in
+  watch(loggedIn, (newLoggedIn) => {
+    if (newLoggedIn) {
+      fetchRoleStatus()
+    }
+  })
+
   return {
     // State (useState already returns writable refs)
     activeRole,
@@ -138,5 +157,6 @@ export function useActiveRole() {
     // Actions
     fetchRoleStatus,
     switchRole,
+    resetRoles,
   }
 }

app/composables/useAuth.ts

@@ -11,6 +11,7 @@
 
 export function useAuth() {
   const { loggedIn, user, clear, fetch } = useUserSession()
+  const { fetchRoleStatus } = useActiveRole()
 
   /**
    * Login with email and password
@@ -37,6 +38,9 @@ export function useAuth() {
     // Refresh user session
     await fetch()
 
+    // Fetch user roles immediately after login
+    await fetchRoleStatus()
+
     // Redirect to products page or saved destination
     const redirectAfterLogin = useCookie('redirect_after_login')
     const destination = redirectAfterLogin.value || '/'