From 0c9af2e7e70183abf134bf236e07c4327a298ed5 Mon Sep 17 00:00:00 2001
From: Toaster2 <brottoastlemon@gmail.com>
Date: Thu, 9 Apr 2026 14:31:51 +0200
Subject: [PATCH 1/2] Show users' role

---
 .../items/user-preview.component.ts           |  7 +-
 .../ui/header/header-me-menu.component.ts     |  7 +-
 .../components/ui/info/user-role.component.ts | 77 +++++++++++++++++++
 .../text/wrappers/user-wrapper.component.ts   | 13 +++-
 src/app/pages/user/user.component.html        |  5 +-
 src/app/pages/user/user.component.ts          |  4 +-
 6 files changed, 103 insertions(+), 10 deletions(-)
 create mode 100644 src/app/components/ui/info/user-role.component.ts

diff --git a/src/app/components/items/user-preview.component.ts b/src/app/components/items/user-preview.component.ts
index e6632865..f6cf513e 100644
--- a/src/app/components/items/user-preview.component.ts
+++ b/src/app/components/items/user-preview.component.ts
@@ -6,6 +6,7 @@ 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',
@@ -13,7 +14,8 @@ import {UserStatusComponent} from "../ui/info/user-status.component";
     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>
diff --git a/src/app/components/ui/header/header-me-menu.component.ts b/src/app/components/ui/header/header-me-menu.component.ts
index f8f53385..da8ea5fb 100644
--- a/src/app/components/ui/header/header-me-menu.component.ts
+++ b/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>
diff --git a/src/app/components/ui/info/user-role.component.ts b/src/app/components/ui/info/user-role.component.ts
new file mode 100644
index 00000000..ec16f906
--- /dev/null
+++ b/src/app/components/ui/info/user-role.component.ts
@@ -0,0 +1,77 @@
+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;
+    f: string = ""
+
+    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;
+}
diff --git a/src/app/components/ui/text/wrappers/user-wrapper.component.ts b/src/app/components/ui/text/wrappers/user-wrapper.component.ts
index 79aad976..015dabe6 100644
--- a/src/app/components/ui/text/wrappers/user-wrapper.component.ts
+++ b/src/app/components/ui/text/wrappers/user-wrapper.component.ts
@@ -3,13 +3,15 @@ import {Component, Input} from '@angular/core';
 import {UserAvatarComponent} from "../../photos/user-avatar.component";
 import {UserRouterLinkComponent} from "../links/user-router-link.component";
 import {User} from "../../../../api/types/users/user";
+import { UserRoleComponent } from "../../info/user-role.component";
 
 @Component({
     selector: 'app-user-wrapper',
     imports: [
-        UserAvatarComponent,
-        UserRouterLinkComponent
-    ],
+    UserAvatarComponent,
+    UserRouterLinkComponent,
+    UserRoleComponent
+],
     template: `
     <div class="flex gap-x-1.5">
       <app-user-router-link [user]=user>
@@ -17,7 +19,10 @@ import {User} from "../../../../api/types/users/user";
       </app-user-router-link>
       
       <div class="flex flex-col">
-        <app-user-router-link [user]="user" class="font-bold">{{user.username}}</app-user-router-link>
+        <app-user-router-link [user]="user" class="font-bold">
+          {{user.username}}
+          <app-user-role [role]="user.role" [short]="true"></app-user-role>
+        </app-user-router-link>
         <ng-content></ng-content>
       </div>
     </div>
diff --git a/src/app/pages/user/user.component.html b/src/app/pages/user/user.component.html
index aceefd82..bd0c9476 100644
--- a/src/app/pages/user/user.component.html
+++ b/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>
diff --git a/src/app/pages/user/user.component.ts b/src/app/pages/user/user.component.ts
index 24987084..c362f822 100644
--- a/src/app/pages/user/user.component.ts
+++ b/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: ``

From 9a3e7e0f605ccf75dfcf41065a8b3820f04fdd34 Mon Sep 17 00:00:00 2001
From: Toaster2 <brottoastlemon@gmail.com>
Date: Thu, 9 Apr 2026 20:11:54 +0200
Subject: [PATCH 2/2] Remove role indicator from user wrapper aswell, for now

---
 src/app/components/ui/info/user-role.component.ts   |  1 -
 .../ui/text/wrappers/user-wrapper.component.ts      | 13 ++++---------
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/app/components/ui/info/user-role.component.ts b/src/app/components/ui/info/user-role.component.ts
index ec16f906..1ed7d252 100644
--- a/src/app/components/ui/info/user-role.component.ts
+++ b/src/app/components/ui/info/user-role.component.ts
@@ -35,7 +35,6 @@ export class UserRoleComponent {
     @Input({required: true}) role: UserRoles = UserRoles.User;
     @Input() short: boolean = false;
     roleIcon: IconProp | undefined;
-    f: string = ""
 
     ngOnInit() {
         switch (this.role) {
diff --git a/src/app/components/ui/text/wrappers/user-wrapper.component.ts b/src/app/components/ui/text/wrappers/user-wrapper.component.ts
index 015dabe6..ceea9650 100644
--- a/src/app/components/ui/text/wrappers/user-wrapper.component.ts
+++ b/src/app/components/ui/text/wrappers/user-wrapper.component.ts
@@ -3,15 +3,13 @@ import {Component, Input} from '@angular/core';
 import {UserAvatarComponent} from "../../photos/user-avatar.component";
 import {UserRouterLinkComponent} from "../links/user-router-link.component";
 import {User} from "../../../../api/types/users/user";
-import { UserRoleComponent } from "../../info/user-role.component";
 
 @Component({
     selector: 'app-user-wrapper',
     imports: [
-    UserAvatarComponent,
-    UserRouterLinkComponent,
-    UserRoleComponent
-],
+        UserAvatarComponent,
+        UserRouterLinkComponent,
+    ],
     template: `
     <div class="flex gap-x-1.5">
       <app-user-router-link [user]=user>
@@ -19,10 +17,7 @@ import { UserRoleComponent } from "../../info/user-role.component";
       </app-user-router-link>
       
       <div class="flex flex-col">
-        <app-user-router-link [user]="user" class="font-bold">
-          {{user.username}}
-          <app-user-role [role]="user.role" [short]="true"></app-user-role>
-        </app-user-router-link>
+        <app-user-router-link [user]="user" class="font-bold">{{user.username}}</app-user-router-link>
         <ng-content></ng-content>
       </div>
     </div>