feat(admin-ui): Set page titles in browser tab

packages/admin-ui/src/lib/core/src/common/title-setter.ts

@@ -0,0 +1,13 @@
+import { inject } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { getAppConfig, I18nService } from '@vendure/admin-ui/core';
+
+/**
+ * Creates a function that can be used to set the meta title of the current page.
+ */
+export function titleSetter() {
+    const titleService = inject(Title);
+    const i18nService = inject(I18nService);
+    const brand = getAppConfig().brand || 'Vendure';
+    return (title: string) => titleService.setTitle(`${i18nService.translate(title)} • ${brand}`);
+}

packages/admin-ui/src/lib/core/src/core.module.ts

@@ -99,7 +99,7 @@ export class CoreModule {
     }
 
     private initUiTitle() {
-        const title = getAppConfig().brand || 'Vendure Admin';
+        const title = getAppConfig().brand || 'Vendure';
 
         this.titleService.setTitle(title);
     }

packages/admin-ui/src/lib/core/src/shared/components/page-title/page-title.component.ts

@@ -1,16 +1,15 @@
 import {
-    AfterViewInit,
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
-    HostListener,
     Input,
     OnChanges,
     OnInit,
     SimpleChanges,
 } from '@angular/core';
-import { fromEvent, Observable, Subject, combineLatest, BehaviorSubject } from 'rxjs';
-import { debounceTime, map, throttleTime } from 'rxjs/operators';
+import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+import { titleSetter } from '../../../common/title-setter';
 import { BreadcrumbService } from '../../../providers/breadcrumb/breadcrumb.service';
 
 @Component({
@@ -23,6 +22,7 @@ export class PageTitleComponent implements OnInit, OnChanges {
     @Input() title = '';
     private titleChange$ = new BehaviorSubject<string | undefined>(undefined);
     protected title$: Observable<string>;
+    readonly setTitle = titleSetter();
 
     constructor(private changeDetector: ChangeDetectorRef, private breadcrumbService: BreadcrumbService) {}
 
@@ -35,6 +35,7 @@ export class PageTitleComponent implements OnInit, OnChanges {
                     return breadcrumbs[breadcrumbs.length - 1].label;
                 }
             }),
+            tap(title => this.setTitle(title)),
         );
     }
 

packages/admin-ui/src/lib/core/src/shared/components/page/page.component.ts

@@ -1,10 +1,9 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Observable, of, switchMap } from 'rxjs';
-import { map } from 'rxjs/operators';
 import { PageLocationId } from '../../../common/component-registry-types';
-import { HeaderTab } from '../page-header-tabs/page-header-tabs.component';
 import { PageService } from '../../../providers/page/page.service';
+import { HeaderTab } from '../page-header-tabs/page-header-tabs.component';
 
 @Component({
     selector: 'vdr-page',

packages/admin-ui/src/lib/dashboard/src/components/dashboard/dashboard.component.ts

@@ -12,6 +12,7 @@ import {
 import { assertNever } from '@vendure/common/lib/shared-utils';
 import { Observable } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
+import { titleSetter } from '../../../../core/src/common/title-setter';
 
 @Component({
     selector: 'vdr-dashboard',
@@ -23,7 +24,7 @@ export class DashboardComponent implements OnInit {
     widgetLayout: WidgetLayout | undefined;
     availableWidgetIds$: Observable<string[]>;
     private readonly deletionMarker = '__delete__';
-
+    private setTitle = titleSetter();
     constructor(
         private dashboardWidgetService: DashboardWidgetService,
         private localStorageService: LocalStorageService,
@@ -37,6 +38,7 @@ export class DashboardComponent implements OnInit {
             map(permissions => this.dashboardWidgetService.getAvailableIds(permissions)),
             tap(ids => (this.widgetLayout = this.initLayout(ids))),
         );
+        this.setTitle('breadcrumb.dashboard');
     }
 
     getClassForWidth(width: DashboardWidgetWidth): string {