Refactor pagination logic and add error handling in history

Introduced `updatePageSize` for better page size management and added checks to prevent rapid page changes. Enhanced error handling in `history.component` with retry logic on failure. Implemented `RemoveTrailingPeriodPipe` for cleaner UI formatting.

frontend/src/app/bans/history/history.component.html

@@ -34,7 +34,7 @@
             <span>{{ entry.punishedBy }}</span>
           </div>
         </td>
-        <td class="historyReason">{{ entry.reason }}</td>
+        <td class="historyReason">{{ entry.reason | removeTrailingPeriod }}</td>
         <td class="historyDate">{{ getPunishmentTime(entry) }}</td>
         <td class="historyDate">{{ getExpiredTime(entry) }}</td>
       </tr>

frontend/src/app/bans/history/history.component.ts

@@ -1,15 +1,18 @@
 import {Component, EventEmitter, Input, OnChanges, OnInit, Output} from '@angular/core';
 import {BASE_PATH, HistoryService, PunishmentHistoryInner} from '../../../api';
-import {map, Observable, shareReplay} from 'rxjs';
+import {catchError, map, Observable, shareReplay} from 'rxjs';
 import {NgForOf, NgIf, NgOptimizedImage} from '@angular/common';
 import {CookieService} from 'ngx-cookie-service';
+import {RemoveTrailingPeriodPipe} from '../../util/RemoveTrailingPeriodPipe';
+import {HttpErrorResponse} from '@angular/common/http';
 
 @Component({
   selector: 'app-history',
   imports: [
     NgIf,
     NgForOf,
-    NgOptimizedImage
+    NgOptimizedImage,
+    RemoveTrailingPeriodPipe
   ],
   templateUrl: './history.component.html',
   styleUrl: './history.component.scss',
@@ -36,7 +39,6 @@ export class HistoryComponent implements OnInit, OnChanges {
 
   ngOnChanges(): void {
     this.reloadHistory();
-    this.pageChange.emit(this.history.length);
   }
 
   ngOnInit(): void {
@@ -57,6 +59,27 @@ export class HistoryComponent implements OnInit, OnChanges {
     historyObservable.pipe(
       map(history => {
         this.history = history;
+        this.pageChange.emit(this.history.length);
+      }),
+      catchError(err => {
+        this.pageChange.emit(-1);
+        let retrySeconds = 5;
+
+        if (err instanceof HttpErrorResponse) {
+          const headers = err.headers;
+          const retryAfterHeader = headers.get('Retry-After');
+          console.warn(err.error);
+          if (retryAfterHeader) {
+            const retryAfter = parseInt(retryAfterHeader || '0', 10);
+            if (!isNaN(retryAfter) && retryAfter > 0) {
+              retrySeconds = retryAfter + 1;
+            }
+          }
+        } else {
+          console.error(err);
+        }
+        setTimeout(() => this.reloadHistory(), retrySeconds * 1000);
+        return this.history;
       }),
       shareReplay(1)
     ).subscribe();