From 4723ca88ecf0e8ea17afb0bd574dc91177941a6e Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Tue, 2 Jul 2024 15:04:54 +0900
Subject: [PATCH 1/2] Fix key navigation bug in accelerator dashboard

---
 .../accelerations-list.component.ts           | 55 ++++++++++---------
 1 file changed, 28 insertions(+), 27 deletions(-)

diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
index f6224c17d..b6f8bacf5 100644
--- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
+++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
@@ -50,17 +50,38 @@ export class AccelerationsListComponent implements OnInit, OnDestroy {
     if (!this.widget) {
       this.websocketService.want(['blocks']);
       this.seoService.setTitle($localize`:@@02573b6980a2d611b4361a2595a4447e390058cd:Accelerations`);
+
+      this.paramSubscription = this.route.params.pipe(
+        tap(params => {
+          this.page = +params['page'] || 1;
+          this.pageSubject.next(this.page);
+        })
+      ).subscribe();
+
+
+      this.keyNavigationSubscription = this.stateService.keyNavigation$.pipe(
+        tap((event) => {
+          const prevKey = this.dir === 'ltr' ? 'ArrowLeft' : 'ArrowRight';
+          const nextKey = this.dir === 'ltr' ? 'ArrowRight' : 'ArrowLeft';
+          if (event.key === prevKey && this.page > 1) {
+            this.page--;
+            this.isLoading = true;
+            this.cd.markForCheck();
+          }
+          if (event.key === nextKey && this.page * 15 < this.accelerationCount) {
+            this.page++;
+            this.isLoading = true;
+            this.cd.markForCheck();
+          }
+        }),
+        throttleTime(1000, undefined, { leading: true, trailing: true }),
+      ).subscribe(() => {
+        this.pageChange(this.page);
+      });
     }
 
     this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()];
     this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
-    
-    this.paramSubscription = this.route.params.pipe(
-      tap(params => {
-        this.page = +params['page'] || 1;
-        this.pageSubject.next(this.page);
-      })
-    ).subscribe();
 
     this.accelerationList$ = this.pageSubject.pipe(
       switchMap((page) => {
@@ -100,26 +121,6 @@ export class AccelerationsListComponent implements OnInit, OnDestroy {
         );
       })
     );
-
-    this.keyNavigationSubscription = this.stateService.keyNavigation$.pipe(
-      tap((event) => {
-        const prevKey = this.dir === 'ltr' ? 'ArrowLeft' : 'ArrowRight';
-        const nextKey = this.dir === 'ltr' ? 'ArrowRight' : 'ArrowLeft';
-        if (event.key === prevKey && this.page > 1) {
-          this.page--;
-          this.isLoading = true;
-          this.cd.markForCheck();
-        }
-        if (event.key === nextKey && this.page * 15 < this.accelerationCount) {
-          this.page++;
-          this.isLoading = true;
-          this.cd.markForCheck();
-        }
-      }),
-      throttleTime(1000, undefined, { leading: true, trailing: true }),
-    ).subscribe(() => {
-      this.pageChange(this.page);
-    });
   }
 
   pageChange(page: number): void {

From 6b0496029c1aaf54edd7c203e61f8e0eeeac5551 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Tue, 2 Jul 2024 21:42:11 +0900
Subject: [PATCH 2/2] Filter arrow key strokes

---
 .../accelerations-list/accelerations-list.component.ts     | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
index b6f8bacf5..c236032e2 100644
--- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
+++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnDestroy, Inject, LOCALE_ID } from '@angular/core';
-import { BehaviorSubject, Observable, Subscription, catchError, of, switchMap, tap, throttleTime } from 'rxjs';
+import { BehaviorSubject, Observable, Subscription, catchError, filter, of, switchMap, tap, throttleTime } from 'rxjs';
 import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface';
 import { StateService } from '../../../services/state.service';
 import { WebsocketService } from '../../../services/websocket.service';
@@ -58,11 +58,12 @@ export class AccelerationsListComponent implements OnInit, OnDestroy {
         })
       ).subscribe();
 
+      const prevKey = this.dir === 'ltr' ? 'ArrowLeft' : 'ArrowRight';
+      const nextKey = this.dir === 'ltr' ? 'ArrowRight' : 'ArrowLeft';
 
       this.keyNavigationSubscription = this.stateService.keyNavigation$.pipe(
+        filter((event) => event.key === prevKey || event.key === nextKey),
         tap((event) => {
-          const prevKey = this.dir === 'ltr' ? 'ArrowLeft' : 'ArrowRight';
-          const nextKey = this.dir === 'ltr' ? 'ArrowRight' : 'ArrowLeft';
           if (event.key === prevKey && this.page > 1) {
             this.page--;
             this.isLoading = true;