feat(nav): reveal toolbar on page change, drop dashboard-scroller

src/app/app.component.spec.ts

@@ -24,7 +24,7 @@ describe('AppComponent', () => {
 
   let dashboard: {
     isDashboardStatic: ReturnType<typeof signal<boolean>>;
-    activeDashboard: ReturnType<typeof signal<number>>;
+    activeDashboard: ReturnType<typeof signal<number | null>>;
     dashboards: ReturnType<typeof signal<unknown[]>>;
     navigateToNextDashboard: ReturnType<typeof vi.fn>;
     navigateToPreviousDashboard: ReturnType<typeof vi.fn>;
@@ -48,7 +48,7 @@ describe('AppComponent', () => {
   beforeEach(async () => {
     dashboard = {
       isDashboardStatic: signal(true),
-      activeDashboard: signal(0),
+      activeDashboard: signal<number | null>(null),
       dashboards: signal([]),
       navigateToNextDashboard: vi.fn(),
       navigateToPreviousDashboard: vi.fn(),
@@ -135,6 +135,45 @@ describe('AppComponent', () => {
     });
   });
 
+  describe('page-change toolbar reveal', () => {
+    it('reveals the toolbar when the active page changes', () => {
+      const fixture = TestBed.createComponent(AppComponent);
+      fixture.detectChanges();
+      chrome.reveal.mockClear();
+
+      dashboard.activeDashboard.set(1);
+      fixture.detectChanges();
+
+      expect(chrome.reveal).toHaveBeenCalledTimes(1);
+    });
+
+    it('reveals again on each subsequent page change', () => {
+      const fixture = TestBed.createComponent(AppComponent);
+      fixture.detectChanges();
+      dashboard.activeDashboard.set(1);
+      fixture.detectChanges();
+      chrome.reveal.mockClear();
+
+      dashboard.activeDashboard.set(2);
+      fixture.detectChanges();
+
+      expect(chrome.reveal).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not reveal on a transition to no active page', () => {
+      const fixture = TestBed.createComponent(AppComponent);
+      fixture.detectChanges();
+      dashboard.activeDashboard.set(1);
+      fixture.detectChanges();
+      chrome.reveal.mockClear();
+
+      dashboard.activeDashboard.set(null);
+      fixture.detectChanges();
+
+      expect(chrome.reveal).not.toHaveBeenCalled();
+    });
+  });
+
   describe('press-outside dismissal', () => {
     const outside = { target: { closest: () => null } };
     const onToolbar = { target: { closest: (sel: string) => (sel === 'app-toolbar' ? {} : null) } };

src/app/app.component.ts

@@ -115,6 +115,14 @@ export class AppComponent implements AfterViewInit, OnDestroy {
       }
     });
 
+    // Reveal the auto-hiding toolbar on every page change: its page-icon strip
+    // is the transient page-position indicator. Fires for swipe, hotkey, tap and
+    // remote navigation alike, since all route through the activeDashboard signal.
+    effect(() => {
+      if (this._dashboard.activeDashboard() === null) return;
+      this.chrome.reveal();
+    });
+
     // initialize dashboardVisible from current URL
     try {
       this.dashboardVisible.set(this.isUrlDashboard(this._router.url));

src/app/core/components/dashboard/dashboard.component.html

@@ -59,9 +59,4 @@
       <mat-icon>done</mat-icon>
     </button>
   </div>
-} @else {
-  <dashboard-scroller
-    [activePage]="dashboard.activeDashboard()"
-    [dashboards]="dashboard.dashboards()"
-  />
 }

src/app/core/components/dashboard/dashboard.component.ts

@@ -3,7 +3,6 @@ import { GestureDirective } from '../../directives/gesture.directive';
 import { GridstackComponent, NgGridStackWidget, NgGridStackOptions, } from 'gridstack/dist/angular';
 import { GridItemHTMLElement, GridStackOptions } from 'gridstack';
 import { DashboardService, widgetOperation } from '../../services/dashboard.service';
-import { DashboardScrollerComponent } from "../dashboard-scroller/dashboard-scroller.component";
 import { UUID } from '../../utils/uuid.util';
 import { ToastService } from '../../services/toast.service';
 import { MatIconModule } from '@angular/material/icon';
@@ -31,7 +30,7 @@ interface GridApi {
 @Component({
   selector: 'dashboard',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [GridstackComponent, DashboardScrollerComponent, MatIconModule, MatButtonModule, GestureDirective, ActionMenuComponent],
+  imports: [GridstackComponent, MatIconModule, MatButtonModule, GestureDirective, ActionMenuComponent],
   templateUrl: './dashboard.component.html',
   styleUrl: './dashboard.component.scss',
   host: {