feat(navbar): add current user balance display in navbar

frontend/src/app/service/user.service.ts

@@ -14,6 +14,10 @@ export class UserService {
     return this.http.get<User | null>(`/backend/user/${id}`).pipe(catchError(() => EMPTY));
   }
 
+  public getCurrentUser(): Observable<User | null> {
+    return this.http.get<User | null>(`/backend/user`).pipe(catchError(() => EMPTY));
+  }
+
   public createUser(id: string, username: string): Observable<User> {
     return this.http.post<User>('/backend/user', {
       keycloakId: id,

frontend/src/app/shared/components/navbar/navbar.component.html

@@ -10,7 +10,11 @@
         </div>
       </div>
 
+
       <div class="hidden md:flex items-center space-x-4">
+        <div class="text-white font-bold bg-deep-blue-contrast rounded-full px-4 py-2 text-sm hover:bg-deep-blue-contrast/80 hover:cursor-pointer hover:scale-105 transition-all active:scale-95 select-none duration-300">
+          {{ balance | currency : 'EUR' : 'symbol' : '1.2-2' }}
+        </div>
         @if (!isLoggedIn) {
           <button (click)="login()" class="button-base px-4 py-1.5">Anmelden</button>
         }

frontend/src/app/shared/components/navbar/navbar.component.ts

@@ -1,18 +1,31 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { KeycloakService } from 'keycloak-angular';
+import { UserService } from '../../../service/user.service';
+import { firstValueFrom } from 'rxjs';
+import { CurrencyPipe } from '@angular/common';
 
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
   standalone: true,
-  imports: [RouterModule],
+  imports: [RouterModule, CurrencyPipe],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NavbarComponent {
   isMenuOpen = false;
   private keycloakService: KeycloakService = inject(KeycloakService);
   isLoggedIn = this.keycloakService.isLoggedIn();
+  private userService = inject(UserService);
+  private user = this.userService.getCurrentUser();
+  balance = 0;
+
+
+  async ngOnInit() {
+    const user = await firstValueFrom(this.user);
+    this.balance = user?.balance ?? 0;
+  }
+
 
   login() {
     try {