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/components/UserMenu.vue

@@ -15,6 +15,7 @@ import {
 } from './ui/dropdown-menu'
 
 const { user, loggedIn, logout } = useAuth()
+const { resetRoles } = useActiveRole()
 
 // Extended user type with all profile fields
 type ExtendedUser = typeof user.value & {
@@ -45,6 +46,8 @@ const userInitials = computed(() => {
 async function handleLogout() {
   try {
     await logout()
+    // Reset role state to default (private, no roles)
+    resetRoles()
   } catch (error) {
     console.error('Logout error:', error)
   }