refactor(topbar): use subtle role line in account dropdown header and simplify role resolver with switch

Author: Diogo-Ferraz

src/app/core/layout/component/app-topbar/app-topbar.component.html

@@ -54,7 +54,20 @@
                 </ng-template>
             </div>
         </div>
-        <p-menu #accountMenu [popup]="true" [model]="accountMenuItems" [appendTo]="'body'"></p-menu>
+        <p-menu #accountMenu [popup]="true" [model]="accountMenuItems" [appendTo]="'body'" styleClass="topbar-account-menu">
+            <ng-template pTemplate="start">
+                <div class="topbar-account-menu__header">
+                    <div class="topbar-account-menu__identity">
+                        <p-avatar [label]="currentUserInitials" shape="circle"></p-avatar>
+                        <div>
+                            <strong>{{ currentUserDisplayName }}</strong>
+                            <small>{{ currentUserEmail }}</small>
+                            <small class="topbar-account-menu__role-line">{{ currentRoleLabel }}</small>
+                        </div>
+                    </div>
+                </div>
+            </ng-template>
+        </p-menu>
         <p-overlayPanel #notificationsPanel styleClass="topbar-notifications-panel" [showCloseIcon]="true" [appendTo]="'body'" (onShow)="markNotificationsAsRead()">
             <div class="topbar-notifications">
                 <div class="topbar-notifications__header">

src/app/core/layout/component/app-topbar/app-topbar.component.scss

@@ -186,6 +186,60 @@
     }
 }
 
+:host ::ng-deep .topbar-account-menu {
+    width: min(22rem, calc(100vw - 2rem));
+}
+
+:host ::ng-deep .topbar-account-menu .p-menu-start {
+    border-bottom: 1px solid var(--surface-border);
+    margin-bottom: 0.25rem;
+}
+
+.topbar-account-menu__header {
+    padding: 0.7rem 0.85rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.55rem;
+}
+
+.topbar-account-menu__identity {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    min-width: 0;
+}
+
+.topbar-account-menu__identity > div {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.08rem;
+}
+
+.topbar-account-menu__identity strong,
+.topbar-account-menu__identity small {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.topbar-account-menu__identity strong {
+    font-size: 0.82rem;
+    color: var(--text-color);
+}
+
+.topbar-account-menu__identity small {
+    font-size: 0.73rem;
+    color: var(--text-color-secondary);
+}
+
+.topbar-account-menu__role-line {
+    margin-top: 0.08rem;
+    font-size: 0.72rem;
+    color: var(--text-color-secondary);
+    line-height: 1.2;
+}
+
 :host ::ng-deep .topbar-notifications-panel {
     width: min(24rem, calc(100vw - 2rem));
 }

src/app/core/layout/component/app-topbar/app-topbar.component.ts

@@ -11,6 +11,7 @@ import { LayoutService } from '../../services/layout.service';
 import { AuthService } from '../../../../core/auth/services/auth.service';
 import { AppPreferencesService } from '../../../preferences/app-preferences.service';
 import { ActivityNotificationItem, ActivityNotificationService } from '../../../../core/notifications/activity-notification.service';
+import { AppRole } from '../../../../core/auth/models/app-role.model';
 
 @Component({
   selector: 'app-topbar',
@@ -161,4 +162,18 @@ export class AppTopbarComponent {
 
     return `${words[0][0] ?? ''}${words[words.length - 1][0] ?? ''}`.toUpperCase();
   }
+
+  get currentRoleLabel(): string {
+    switch (true) {
+      case this.authService.hasRole(AppRole.Administrator):
+        return 'Administrator';
+      case this.authService.hasRole(AppRole.ProjectManager):
+        return 'Project Manager';
+      case this.authService.hasRole(AppRole.User):
+        return 'User';
+      default:
+        return 'Role';
+    }
+  }
+
 }