show border if user is special

src/assets/styles/common-layout.scss

@@ -150,7 +150,7 @@ section.settings {
         align-items: center;
 
         // TODO: Shouldn't use `redaction-` here
-        redaction-initials-avatar .username {
+        iqser-initials-avatar .username {
             display: none;
         }
     }

src/lib/services/iqser-config.service.ts

@@ -9,6 +9,7 @@ export class IqserConfigService<T extends IqserAppConfig = IqserAppConfig> {
 
     constructor(protected _values: T) {
         this._checkFrontendVersion();
+        this._titleService.setTitle(this._values.APP_NAME);
     }
 
     get values() {

src/lib/users/components/initials-avatar/initials-avatar.component.ts

@@ -68,7 +68,7 @@ export class InitialsAvatarComponent<Interface extends IIqserUser = IIqserUser,
         return this._user?.id?.toLowerCase() === 'system';
     }
 
-    @Input() showBorderCondition: <T extends Class = Class>(user: T) => boolean = () => false;
+    @Input() showBorderCondition: <T extends Class = Class>(user: T) => boolean = user => user.isSpecial;
 
     ngOnChanges(): void {
         if (this._isSystemUser) {

src/lib/users/components/user-button/user-button.component.html

@@ -1,5 +1,5 @@
 <button [class.overlay]="showDot" mat-button>
-    <ng-content></ng-content>
+    <iqser-initials-avatar [user]="userService.currentUser$ | async" [withName]="true"></iqser-initials-avatar>
 
     <mat-icon svgIcon="iqser:arrow-down"></mat-icon>
 </button>

src/lib/users/components/user-button/user-button.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { IqserUserService } from '../../services/iqser-user.service';
 
 @Component({
     selector: 'iqser-user-button',
@@ -8,4 +9,6 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 })
 export class UserButtonComponent {
     @Input() showDot = false;
+
+    constructor(readonly userService: IqserUserService) {}
 }

src/lib/users/iqser-user.model.ts

@@ -14,6 +14,7 @@ export class IqserUser implements IIqserUser, IListable {
     readonly hasAnyRole = this.roles.length > 0;
 
     constructor(user: KeycloakProfile | IIqserUser, ...args: unknown[]);
+
     constructor(user: KeycloakProfile | IIqserUser, readonly roles: List, readonly userId: string) {
         this.email = user.email;
         this.username = user.username ?? this.email ?? 'unknown user';
@@ -23,10 +24,39 @@ export class IqserUser implements IIqserUser, IListable {
         this.searchKey = `${this.name || '-'}${this.username || '-'}${this.email || ''}`;
     }
 
+    private _isSpecial?: boolean;
+
+    /**
+     * This getter is required by initials avatar to know if the border should be drawn
+     */
+    get isSpecial() {
+        if (!this._isExtended) {
+            return false;
+        }
+
+        if (this._isSpecial === undefined) {
+            throw new Error('Property isSpecial is not implemented');
+        }
+
+        return this._isSpecial;
+    }
+
+    set isSpecial(value: boolean) {
+        this._isSpecial = value;
+    }
+
     get id() {
         return this.userId;
     }
 
+    /**
+     * Checks if this class is used as a base class
+     * @private
+     */
+    private get _isExtended() {
+        return this.constructor !== IqserUser;
+    }
+
     has(role: string): boolean {
         return this.roles.includes(role);
     }