[WebApp] Show username

webapp/src/app/layout/main-layout/main-layout.component.html

@@ -65,6 +65,9 @@
           <span class="expert-mode-label">Expert</span>
         </div>
         <div class="user-info">
+          @if (username()) {
+            <span class="username">{{ username() }}</span>
+          }
           <span class="user-id mono">{{ userId }}</span>
           @if (currentKey()) {
             <span class="key-id mono">{{ currentKey()!.keytoken_id }}</span>

webapp/src/app/layout/main-layout/main-layout.component.scss

@@ -85,6 +85,12 @@
   align-items: flex-end;
   line-height: 1.3;
 
+  .username {
+    color: #333;
+    font-size: 13px;
+    font-weight: 600;
+  }
+
   .user-id {
     color: #666;
     font-size: 13px;

webapp/src/app/layout/main-layout/main-layout.component.ts

@@ -40,10 +40,12 @@ export class MainLayoutComponent implements OnInit {
   isCollapsed = signal(false);
   userId = this.authService.getUserId();
   currentKey = signal<KeyToken | null>(null);
+  username = signal<string | null>(null);
   expertMode = this.settingsService.expertMode;
 
   ngOnInit(): void {
     this.loadCurrentKey();
+    this.loadUser();
   }
 
   private loadCurrentKey(): void {
@@ -55,6 +57,15 @@ export class MainLayoutComponent implements OnInit {
     });
   }
 
+  private loadUser(): void {
+    const userId = this.userId;
+    if (!userId) return;
+
+    this.apiService.getUser(userId).subscribe({
+      next: (user) => this.username.set(user.username)
+    });
+  }
+
   toggleCollapsed(): void {
     this.isCollapsed.update(v => !v);
   }