Keep the Routes panel's entries across a trip to another tab

The panel was unmounted with its tab, so leaving it reset departure, destination and range. The
range reset was also a lie: the slider came back at 3 pc while the scene kept drawing the graph at
the range last chosen. The panel now stays mounted and is hidden while another tab is open, which
still replays the acquire wipe when it is shown again.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jxMkwA2rbicdGxHosecYi

src/app/features/hud/hud-dock.component.spec.ts

@@ -252,4 +252,32 @@ describe('HudDockComponent', () => {
     fixture.detectChanges();
     expect(tab('Readout').getAttribute('aria-selected')).toBe('true');
   });
+
+  it('keeps what the Routes panel was set to across a trip to another tab', () => {
+    setReadout();
+    fixture.componentRef.setInput('routing', true);
+    fixture.componentRef.setInput('routeOptions', [{ id: 7, name: 'Sirius', subtitle: '2.6 pc' }]);
+    fixture.componentRef.setInput('defaultTab', 'routes');
+    fixture.detectChanges();
+
+    const destination = host().querySelector<HTMLInputElement>('#route-to')!;
+    destination.value = 'Sir';
+    destination.dispatchEvent(new Event('input'));
+    fixture.detectChanges();
+    host().querySelector<HTMLButtonElement>('#dock-panel-routes ul button')!.click();
+    const range = host().querySelector<HTMLInputElement>('#route-range')!;
+    range.value = '6';
+    range.dispatchEvent(new Event('input'));
+    fixture.detectChanges();
+
+    tab('Readout').click();
+    fixture.detectChanges();
+    expect(host().querySelector<HTMLElement>('#dock-panel-routes')!.hidden).toBe(true);
+    tab('Routes').click();
+    fixture.detectChanges();
+
+    expect(host().querySelector<HTMLElement>('#dock-panel-routes')!.hidden).toBe(false);
+    expect(host().querySelector<HTMLInputElement>('#route-to')!.value).toBe('Sirius');
+    expect(host().querySelector<HTMLInputElement>('#route-range')!.value).toBe('6');
+  });
 });

src/app/features/hud/hud-dock.component.ts

@@ -128,20 +128,6 @@ function isWideViewport(): boolean {
               }
             </section>
           }
-          @case ('routes') {
-            <section id="dock-panel-routes" role="tabpanel" aria-labelledby="dock-tab-routes" class="hud-acquire hud-brackets hud-surface pointer-events-auto mb-2 w-full max-w-xl px-4 py-3">
-              <app-routes-panel
-                [result]="routeResult()"
-                [pending]="routePending()"
-                [options]="routeOptions()"
-                [currentStar]="currentStar()"
-                (queryChange)="routeQuery.emit($event)"
-                (routeRequested)="routeRequested.emit($event)"
-                (starSelected)="onRouteStarSelected($event)"
-                (rangeChange)="jumpRangeChange.emit($event)"
-              />
-            </section>
-          }
           @case ('bookmarks') {
             <section id="dock-panel-bookmarks" role="tabpanel" aria-labelledby="dock-tab-bookmarks" class="hud-acquire hud-brackets hud-surface pointer-events-auto mb-2 w-full max-w-lg">
               @if (bookmarks.bookmarks().length) {
@@ -198,6 +184,23 @@ function isWideViewport(): boolean {
           }
         }
       }
+      <!-- Hidden rather than unmounted: the departure, destination and range it holds would
+           otherwise reset on every trip to another tab, while the scene kept drawing the graph at
+           the old range. Hiding still replays the acquire wipe when it is shown again. -->
+      @if (routing()) {
+        <section id="dock-panel-routes" role="tabpanel" aria-labelledby="dock-tab-routes" [hidden]="activeTab() !== 'routes'" class="hud-acquire hud-brackets hud-surface pointer-events-auto mb-2 w-full max-w-xl px-4 py-3">
+          <app-routes-panel
+            [result]="routeResult()"
+            [pending]="routePending()"
+            [options]="routeOptions()"
+            [currentStar]="currentStar()"
+            (queryChange)="routeQuery.emit($event)"
+            (routeRequested)="routeRequested.emit($event)"
+            (starSelected)="onRouteStarSelected($event)"
+            (rangeChange)="jumpRangeChange.emit($event)"
+          />
+        </section>
+      }
 
       <div class="hud-brackets hud-surface pointer-events-auto flex w-full items-stretch">
         <div role="tablist" aria-label="Dock" class="flex items-stretch divide-x divide-border/40">