bug: fix log scrolling by arrow keys

web/src/app/log/components/log-list.component.html

@@ -35,7 +35,7 @@
     </div>
     <p class="spacer">{{ shownLogsCount() }}/{{ allLogsCount() }} logs</p>
   </div>
-  <div class="log-list-container" tabindex="0">
+  <div class="log-list-container" tabindex="0" (keydown)="onKeyDown($event)">
     <cdk-virtual-scroll-viewport class="virtual-viewport">
       <div class="log-list">
         <ng-container *cdkVirtualFor="let log of shownLogs()">

web/src/app/log/components/log-list.component.spec.ts

@@ -91,4 +91,45 @@ describe('LogListComponent', () => {
     component['onLogHover'](mockLogs[0]);
     expect(component.logHovered.emit).toHaveBeenCalledWith(mockLogs[0]);
   });
+
+  it('should select first log on ArrowDown when no log is selected', () => {
+    spyOn(component.logSelected, 'emit');
+    const event = new KeyboardEvent('keydown', { key: 'ArrowDown' });
+    component['onKeyDown'](event);
+    expect(component.logSelected.emit).toHaveBeenCalledWith(mockLogs[0]);
+  });
+
+  it('should select next log on ArrowDown when a log is selected', () => {
+    fixture.componentRef.setInput('selectedLogIndex', mockLogs[0].logIndex);
+    fixture.detectChanges();
+    spyOn(component.logSelected, 'emit');
+    const event = new KeyboardEvent('keydown', { key: 'ArrowDown' });
+    component['onKeyDown'](event);
+    expect(component.logSelected.emit).toHaveBeenCalledWith(mockLogs[1]);
+  });
+
+  it('should select last log on ArrowUp when no log is selected', () => {
+    spyOn(component.logSelected, 'emit');
+    const event = new KeyboardEvent('keydown', { key: 'ArrowUp' });
+    component['onKeyDown'](event);
+    expect(component.logSelected.emit).toHaveBeenCalledWith(
+      mockLogs[mockLogs.length - 1],
+    );
+  });
+
+  it('should select previous log on ArrowUp when a log is selected', () => {
+    fixture.componentRef.setInput('selectedLogIndex', mockLogs[1].logIndex);
+    fixture.detectChanges();
+    spyOn(component.logSelected, 'emit');
+    const event = new KeyboardEvent('keydown', { key: 'ArrowUp' });
+    component['onKeyDown'](event);
+    expect(component.logSelected.emit).toHaveBeenCalledWith(mockLogs[0]);
+  });
+
+  it('should prevent default browser scrolling behavior on ArrowUp and ArrowDown', () => {
+    const event = new KeyboardEvent('keydown', { key: 'ArrowDown' });
+    spyOn(event, 'preventDefault');
+    component['onKeyDown'](event);
+    expect(event.preventDefault).toHaveBeenCalled();
+  });
 });

web/src/app/log/components/log-list.component.ts

@@ -131,6 +131,49 @@ export class LogListComponent {
     this.logHovered.emit(logEntry);
   }
 
+  /**
+   * Handles keyboard navigation (ArrowUp/ArrowDown) on the log list container to allow
+   * selecting and scrolling through logs using keyboard controls.
+   */
+  protected onKeyDown(event: KeyboardEvent) {
+    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {
+      return;
+    }
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+      return;
+    }
+
+    const logs = this.shownLogs();
+    if (logs.length === 0) return;
+
+    // Prevent the default browser scrolling behavior when navigating the log list.
+    event.preventDefault();
+
+    const selectedIndex = this.selectedLogIndex();
+    const arrayIndex = this.searchArrayIndexOfLog(logs, selectedIndex);
+
+    let nextArrayIndex = -1;
+    if (event.key === 'ArrowUp') {
+      if (arrayIndex === -1) {
+        nextArrayIndex = logs.length - 1;
+      } else if (arrayIndex > 0) {
+        nextArrayIndex = arrayIndex - 1;
+      }
+    } else if (event.key === 'ArrowDown') {
+      if (arrayIndex === -1) {
+        nextArrayIndex = 0;
+      } else if (arrayIndex < logs.length - 1) {
+        nextArrayIndex = arrayIndex + 1;
+      }
+    }
+
+    if (nextArrayIndex >= 0 && nextArrayIndex < logs.length) {
+      // Direct emission without setting disableScrollForNext ensures that the view
+      // automatically scrolls to the newly selected log.
+      this.logSelected.emit(logs[nextArrayIndex]);
+    }
+  }
+
   private filterLogsWithTimelines(
     logs: ReadonlyDomainElement<Log>[],
     timelines: ReadonlyDomainElement<Timeline>[],