Show user role on previews and user page

src/app/components/items/user-preview.component.ts

@@ -6,14 +6,16 @@ import {UserAvatarComponent} from "../ui/photos/user-avatar.component";
 
 import {UserStatisticsComponent} from "./user-statistics.component";
 import {UserStatusComponent} from "../ui/info/user-status.component";
+import { UserRoleComponent } from "../ui/info/user-role.component";
 
 @Component({
     selector: 'app-user-preview',
     imports: [
     UserRouterLinkComponent,
     UserAvatarComponent,
     UserStatisticsComponent,
-    UserStatusComponent
+    UserStatusComponent,
+    UserRoleComponent
 ],
     template: `
     <div class="flex gap-x-2.5 leading-none justify-center">
@@ -22,7 +24,8 @@ import {UserStatusComponent} from "../ui/info/user-status.component";
       </app-user-router-link>
       <div class="truncate grow">
         <app-user-router-link [user]="user">
-          <p class="font-medium text-lg truncate" [title]=user.username>{{ user.username }}</p>
+          <span class="font-medium text-lg truncate pr-1" [title]=user.username>{{ user.username }}</span>
+          <app-user-role [role]="user.role"></app-user-role>
         </app-user-router-link>
 
         <app-user-statistics [stats]="user.statistics" [ownRelations]="user.ownRelations" class="text-sm"></app-user-statistics>

src/app/components/ui/header/header-me-menu.component.ts

@@ -8,6 +8,7 @@ import {UserStatisticsComponent} from "../../items/user-statistics.component";
 
 import {DividerComponent} from "../divider.component";
 import {NavItem} from "./navtypes";
+import { UserRoleComponent } from "../info/user-role.component";
 
 @Component({
     selector: 'app-header-me-menu',
@@ -16,7 +17,8 @@ import {NavItem} from "./navtypes";
     UserAvatarComponent,
     UserRouterLinkComponent,
     UserStatisticsComponent,
-    DividerComponent
+    DividerComponent,
+    UserRoleComponent
 ],
     template: `
     <div class="absolute z-1 w-64 px-5 py-2.5 flex flex-col rounded-b bg-header-background gap-y-2 right-0 drop-shadow-md">
@@ -26,7 +28,8 @@ import {NavItem} from "./navtypes";
         </app-user-router-link>
         <div class="truncate grow">
           <app-user-router-link [user]="user">
-            <p class="font-medium text-lg truncate text-" [title]=user.username>{{ user.username }}</p>
+            <span class="font-medium text-lg truncate text-" [title]=user.username>{{ user.username }}</span>
+            <app-user-role [role]="user.role" [short]="true"></app-user-role>
           </app-user-router-link>
 
           <app-user-statistics [stats]="user.statistics" class="text-xs"></app-user-statistics>

src/app/components/ui/info/user-role.component.ts

@@ -0,0 +1,76 @@
+import {Component, Input} from '@angular/core';
+import { UserRoles } from '../../../api/types/users/user-roles';
+import { RolePipe } from '../../../pipes/role.pipe';
+import { FaIconComponent } from "@fortawesome/angular-fontawesome";
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { faUser, faUserAltSlash, faUserAstronaut, faUserCheck, faUserGear, faUserLock, faUserPen, faUserShield } from '@fortawesome/free-solid-svg-icons';
+import { TooltipComponent } from "../text/tooltip.component";
+
+@Component({
+    selector: 'app-user-role',
+    imports: [
+    RolePipe,
+    FaIconComponent,
+    TooltipComponent
+],
+    providers: [
+        RolePipe
+    ],
+    template: `
+        <!-- for some reason Angular doesn't escape the ' if it's prefixed by only one backslash here specifically-->
+        <app-tooltip [text]="'This user\\\'s role is ' + (role | role)" >
+            <span  class="pl-1 text-gentle text-md">
+                @if (roleIcon) {
+                    <fa-icon class="text-sm" [icon]="roleIcon"></fa-icon>
+                }
+                @if (!short) {
+                    <span class="pl-1">{{ role | role }}</span>
+                }
+            </span>
+        </app-tooltip>
+
+    `
+})
+export class UserRoleComponent {
+    @Input({required: true}) role: UserRoles = UserRoles.User;
+    @Input() short: boolean = false;
+    roleIcon: IconProp | undefined;
+
+    ngOnInit() {
+        switch (this.role) {
+            case UserRoles.Admin:
+                this.roleIcon = this.faUserGear;
+                break;
+            case UserRoles.Moderator:
+                this.roleIcon = this.faUserShield;
+                break;
+            case UserRoles.Curator:
+                this.roleIcon = this.faUserPen;
+                break;
+            case UserRoles.Trusted:
+                this.roleIcon = this.faUserCheck;
+                break;
+            case UserRoles.User:
+                this.roleIcon = this.faUser;
+                break;
+            case UserRoles.Restricted:
+                this.roleIcon = this.faUserLock;
+                break;
+            case UserRoles.Banned:
+                this.roleIcon = this.faUserAltSlash;
+                break;
+            default:
+                this.roleIcon = this.faUserAstronaut;
+                break;
+        }
+    }
+
+    protected readonly faUserGear = faUserGear;
+    protected readonly faUserShield = faUserShield;
+    protected readonly faUserPen = faUserPen;
+    protected readonly faUserCheck = faUserCheck;
+    protected readonly faUser = faUser;
+    protected readonly faUserAltSlash = faUserAltSlash;
+    protected readonly faUserLock = faUserLock;
+    protected readonly faUserAstronaut = faUserAstronaut;
+}

src/app/components/ui/text/wrappers/user-wrapper.component.ts

@@ -8,7 +8,7 @@ import {User} from "../../../../api/types/users/user";
     selector: 'app-user-wrapper',
     imports: [
         UserAvatarComponent,
-        UserRouterLinkComponent
+        UserRouterLinkComponent,
     ],
     template: `
     <div class="flex gap-x-1.5">

src/app/pages/user/user.component.html

@@ -3,10 +3,13 @@
                       [description]="user.description | default: user.username + ' hasn\'t introduced themselves yet.'">
         <app-user-avatar [user]="user" [size]="(layout.isMobile | async) ? 90 : 176" avatar></app-user-avatar>
         <ng-container titleSubtext>
+            <app-user-role [role]="user.role"></app-user-role>
+        </ng-container>
+        <div belowTitleRight class="italic text-gentle">
             Joined
             <app-date [date]="user.joinDate"></app-date>
             <br>
-        </ng-container>
+        </div>
         <ng-container belowTitle>
             <app-user-status [activeRoom]="user.activeRoom" [lastSeen]="user.lastLoginDate"></app-user-status>
         </ng-container>

src/app/pages/user/user.component.ts

@@ -15,6 +15,7 @@ import { UserRelations } from '../../api/types/users/user-relations';
 import { FancyHeaderUserButtonsComponent } from "../../components/ui/layouts/fancy-header-user-buttons.component";
 import { ExtendedUser } from '../../api/types/users/extended-user';
 import { AuthenticationService } from '../../api/authentication.service';
+import { UserRoleComponent } from "../../components/ui/info/user-role.component";
 
 @Component({
     selector: 'app-user',
@@ -26,7 +27,8 @@ import { AuthenticationService } from '../../api/authentication.service';
     AsyncPipe,
     UserStatusComponent,
     UserStatisticsComponent,
-    FancyHeaderUserButtonsComponent
+    FancyHeaderUserButtonsComponent,
+    UserRoleComponent
 ],
     templateUrl: './user.component.html',
     styles: ``