Fix header safe-area inset, avatar flicker on resume, and add refresh

- Header: let the toolbar grow by env(safe-area-inset-top) instead of
  letting the padding eat into Material's fixed toolbar height, which
  pushed the content under the iOS status bar in standalone PWA mode.
- Avatar: derive the profile with linkedSignal so the last known value
  is retained while user data is momentarily empty during a token
  renewal on resume, instead of blanking out the avatar.
- Renewal: swallow forced-refresh errors so a failed renew on resume
  can't surface as an unhandled error.
- Refresh: add an in-app refresh button on the home page, since the
  browser disables pull-to-refresh in standalone PWA mode.

Author: claude

client/src/app/app.component.css

@@ -1,6 +1,10 @@
 .header {
   border-bottom: 1px solid var(--bt-outline);
   display: block;
+  /* Let the toolbar grow by the status-bar inset instead of letting the
+     padding eat into Material's fixed toolbar height (which crushes the
+     content under the iOS status bar in standalone PWA mode). */
+  height: auto;
   padding: env(safe-area-inset-top) 0 0;
 
   nav {
@@ -10,7 +14,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    height: 100%;
+    min-height: var(--mat-toolbar-standard-height, 64px);
 
     a[mat-button] {
       font-size: 16px;

client/src/app/home/home.component.css

@@ -5,6 +5,12 @@
   padding: 0 2rem;
 }
 
+.page-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 0.5rem;
+}
+
 h1 {
   color: var(--bt-text-strong);
   margin-bottom: 0.5rem;

client/src/app/home/home.component.html

@@ -1,3 +1,14 @@
+<div class="page-toolbar">
+  <button
+    mat-icon-button
+    aria-label="Refresh greeting"
+    (click)="greeting.reload()"
+    [disabled]="greeting.isLoading()"
+  >
+    <mat-icon>refresh</mat-icon>
+  </button>
+</div>
+
 @if (greeting.isLoading()) {
 <bt-bar-loader class="page-loading" label="Loading greeting" />
 } @else {

client/src/app/home/home.component.ts

@@ -1,5 +1,7 @@
 import { Component, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
 import { BarLoaderComponent } from '@mucsi96/angular-material-theme';
 import { GreetingService } from '../greeting.service';
 
@@ -8,7 +10,9 @@ import { GreetingService } from '../greeting.service';
   standalone: true,
   imports: [
     BarLoaderComponent,
+    MatButtonModule,
     MatCardModule,
+    MatIconModule,
   ],
   templateUrl: './home.component.html',
   styleUrl: './home.component.css',

client/src/app/user-profile.service.ts

@@ -1,33 +1,48 @@
-import { computed, Injectable, inject } from '@angular/core';
+import { Injectable, inject, linkedSignal } from '@angular/core';
 import { AuthService } from './auth.service';
 
+interface UserProfile {
+  name: string;
+  initials: string;
+}
+
 @Injectable({
   providedIn: 'root',
 })
 export class UserProfileService {
   private readonly authService = inject(AuthService);
 
-  profile = computed(() => {
-    const userDataResult = this.authService.userData();
-    const userData = userDataResult?.userData;
-    const name = userData?.name ?? userData?.preferred_username;
+  // Derive the profile from the auth user data, but keep the last known value
+  // while the user data is momentarily empty during a token renewal (which
+  // happens when the installed PWA resumes on mobile). A plain computed would
+  // blank out and make the avatar disappear; linkedSignal lets us fall back to
+  // the previous value instead.
+  profile = linkedSignal<unknown, UserProfile | undefined>({
+    source: this.authService.userData,
+    computation: (userDataResult, previous) => {
+      const userData = (
+        userDataResult as
+          | { userData?: { name?: string; preferred_username?: string } }
+          | undefined
+      )?.userData;
+      const name = userData?.name ?? userData?.preferred_username;
 
-    if (!name) {
-      return undefined;
-    }
+      if (!name) {
+        return previous?.value;
+      }
 
-    return {
-      name,
-      initials: this.getInitials(name),
-    };
+      return {
+        name,
+        initials: this.getInitials(name),
+      };
+    },
   });
 
-  private getInitials(name: string | undefined): string {
-    if (!name) return '';
-    const initials = name
+  private getInitials(name: string): string {
+    return name
       .split(' ')
-      .map((n) => n[0])
-      .join('');
-    return initials.toUpperCase();
+      .map((part) => part[0])
+      .join('')
+      .toUpperCase();
   }
 }

client/src/app/utils/token-renewal.service.ts

@@ -1,7 +1,7 @@
 import { DestroyRef, inject, Injectable } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { OidcSecurityService } from 'angular-auth-oidc-client';
-import { fromEvent, merge, throttleTime } from 'rxjs';
+import { catchError, EMPTY, fromEvent, merge, throttleTime } from 'rxjs';
 
 /**
  * Keeps the access token fresh on mobile.
@@ -45,7 +45,10 @@ export class TokenRenewalService {
         if (isAuthenticated) {
           this.oidcSecurityService
             .forceRefreshSession()
-            .pipe(takeUntilDestroyed(this.destroyRef))
+            .pipe(
+              catchError(() => EMPTY),
+              takeUntilDestroyed(this.destroyRef)
+            )
             .subscribe();
         }
       });