fix(app): fix linter issues

Ismaestro · Ismaestro · commit bf541da31cea · 2025-10-29T01:15:25.000+01:00
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -106,6 +106,8 @@ export default tsEslint.config(
       'no-implicit-coercion': 'off',
       'no-ternary': 'off',
       'no-implicit-globals': 'off',
+      '@angular-eslint/no-experimental': 'off',
+      '@angular-eslint/no-developer-preview': 'off',
       '@angular-eslint/prefer-standalone': 'off',
       '@angular-eslint/prefer-standalone-component': 'off',
       '@angular-eslint/runtime-localize': 'off',
@@ -148,6 +150,7 @@ export default tsEslint.config(
     extends: [...angular.configs.templateAll],
     rules: {
       '@angular-eslint/template/no-call-expression': 'off',
+      '@angular-eslint/template/prefer-template-literal': 'off',
       '@angular-eslint/template/i18n': [
         'error',
         {
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,56 +29,56 @@
     "@angular/platform-server": "20.3.7",
     "@angular/router": "20.3.7",
     "@angular/ssr": "20.3.7",
-    "express": "4.18.2",
+    "express": "^4.21.2",
     "ngx-progressbar": "14.0.0",
     "rxjs": "7.8.2",
     "tslib": "2.8.1"
   },
   "devDependencies": {
-    "@angular-eslint/builder": "19.3.0",
-    "@angular-eslint/eslint-plugin": "19.3.0",
-    "@angular-eslint/eslint-plugin-template": "19.3.0",
-    "@angular-eslint/schematics": "19.3.0",
-    "@angular-eslint/template-parser": "19.3.0",
+    "@angular-eslint/builder": "20.5.0",
+    "@angular-eslint/eslint-plugin": "20.5.0",
+    "@angular-eslint/eslint-plugin-template": "20.5.0",
+    "@angular-eslint/schematics": "20.5.0",
+    "@angular-eslint/template-parser": "20.5.0",
     "@angular/build": "20.3.7",
     "@angular/cli": "20.3.7",
     "@angular/compiler-cli": "20.3.7",
-    "@commitlint/cli": "19.8.0",
-    "@commitlint/config-conventional": "19.8.0",
-    "@eslint/js": "9.23.0",
-    "@ngrx/component": "19.1.0",
-    "@playwright/test": "1.51.1",
+    "@commitlint/cli": "20.1.0",
+    "@commitlint/config-conventional": "20.0.0",
+    "@eslint/js": "9.38.0",
+    "@ngrx/component": "20.1.0",
+    "@playwright/test": "1.56.1",
     "@shoelace-style/shoelace": "2.20.1",
     "@types/express": "4.17.17",
-    "@types/node": "18.18.0",
-    "@types/validator": "13.12.3",
-    "@typescript-eslint/eslint-plugin": "8.29.0",
-    "@typescript-eslint/parser": "8.29.0",
-    "@typescript-eslint/types": "8.29.0",
-    "@typescript-eslint/utils": "8.29.0",
+    "@types/node": "24.9.2",
+    "@types/validator": "13.15.4",
+    "@typescript-eslint/eslint-plugin": "8.46.2",
+    "@typescript-eslint/parser": "8.46.2",
+    "@typescript-eslint/types": "8.46.2",
+    "@typescript-eslint/utils": "8.46.2",
     "@vitest/coverage-v8": "4.0.4",
-    "angular-eslint": "19.3.0",
-    "eslint": "9.23.0",
-    "eslint-config-prettier": "10.1.1",
+    "angular-eslint": "20.5.0",
+    "eslint": "9.38.0",
+    "eslint-config-prettier": "10.1.8",
     "eslint-plugin-eslint-comments": "3.2.0",
-    "eslint-plugin-prettier": "5.2.6",
+    "eslint-plugin-prettier": "5.5.4",
     "eslint-plugin-promise": "7.2.1",
-    "eslint-plugin-unicorn": "58.0.0",
+    "eslint-plugin-unicorn": "62.0.0",
     "husky": "9.1.7",
     "jsdom": "27.0.1",
     "ng-extract-i18n-merge": "3.1.0",
     "normalize.css": "8.0.1",
-    "playwright": "1.51.1",
+    "playwright": "1.56.1",
     "postcss-scss": "4.0.9",
-    "prettier": "3.5.3",
-    "prettier-eslint": "16.3.0",
-    "stylelint": "16.17.0",
-    "stylelint-config-recess-order": "6.0.0",
-    "stylelint-config-standard-scss": "14.0.0",
-    "stylelint-order": "6.0.4",
-    "ts-loader": "9.5.2",
-    "typescript": "5.8.2",
-    "typescript-eslint": "8.29.0",
+    "prettier": "3.6.2",
+    "prettier-eslint": "16.4.2",
+    "stylelint": "16.25.0",
+    "stylelint-config-recess-order": "7.4.0",
+    "stylelint-config-standard-scss": "16.0.0",
+    "stylelint-order": "7.0.0",
+    "ts-loader": "9.5.4",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.46.2",
     "vitest": "4.0.4"
   },
   "private": true
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
@@ -11,9 +11,9 @@ import type { Mock } from 'vitest';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 @Component({
-  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'app-header',
   template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 class HeaderStubComponent {}
 
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, effect, inject, DOCUMENT } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DOCUMENT, effect, inject } from '@angular/core';
 import { translations } from '../locale/translations';
 import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
 import { Meta, Title } from '@angular/platform-browser';
@@ -14,9 +14,6 @@ import { ToastStackComponent } from '~core/components/toast-stack/toast-stack.co
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     RouterOutlet,
     HeaderComponent,
@@ -25,6 +22,9 @@ import { ToastStackComponent } from '~core/components/toast-stack/toast-stack.co
     CookiePopupComponent,
     ToastStackComponent,
   ],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
   private readonly document = inject(DOCUMENT);
diff --git a/src/app/core/components/card/card.component.ts b/src/app/core/components/card/card.component.ts
@@ -3,10 +3,10 @@ import { NgTemplateOutlet } from '@angular/common';
 
 @Component({
   selector: 'app-card',
+  imports: [NgTemplateOutlet],
   templateUrl: './card.component.html',
   styleUrl: './card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgTemplateOutlet],
 })
 export class CardComponent {
   readonly href = input<string>('');
diff --git a/src/app/core/components/error-404/error-404.component.ts b/src/app/core/components/error-404/error-404.component.ts
@@ -3,9 +3,9 @@ import { NgOptimizedImage } from '@angular/common';
 
 @Component({
   selector: 'app-error-404',
+  imports: [NgOptimizedImage],
   templateUrl: './error-404.component.html',
   styleUrl: 'error-404.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgOptimizedImage],
 })
 export class Error404Component {}
diff --git a/src/app/core/components/footer/footer.component.scss b/src/app/core/components/footer/footer.component.scss
@@ -4,11 +4,11 @@
   margin-top: auto;
 
   .footer-container {
-    container: footer / inline-size;
     position: relative;
     justify-content: center;
     padding: var(--layout-padding);
     padding-inline-end: var(--spacing-r-xl);
+    container: footer / inline-size;
     background-color: var(--page-background);
     transition: background-color 0.3s ease;
 
diff --git a/src/app/core/components/header/header.component.ts b/src/app/core/components/header/header.component.ts
@@ -24,9 +24,6 @@ import '@shoelace-style/shoelace/dist/components/dropdown/dropdown.js';
 
 @Component({
   selector: 'app-header',
-  templateUrl: './header.component.html',
-  styleUrl: './header.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     RouterLink,
     RouterLinkActive,
@@ -36,6 +33,9 @@ import '@shoelace-style/shoelace/dist/components/dropdown/dropdown.js';
     ThemeButtonComponent,
     PokemonSearchInputComponent,
   ],
+  templateUrl: './header.component.html',
+  styleUrl: './header.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class HeaderComponent {
diff --git a/src/app/core/components/language-selector/language-selector.component.ts b/src/app/core/components/language-selector/language-selector.component.ts
@@ -13,9 +13,9 @@ import '@shoelace-style/shoelace/dist/components/dropdown/dropdown.js';
 
 @Component({
   selector: 'app-language-selector',
+  imports: [UpperCasePipe],
   templateUrl: './language-selector.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [UpperCasePipe],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class LanguageSelectorComponent {
diff --git a/src/app/core/components/progress-bar/progress-bar.component.ts b/src/app/core/components/progress-bar/progress-bar.component.ts
@@ -25,8 +25,8 @@ export const PROGRESS_BAR_DELAY = 30;
 
 @Component({
   selector: 'app-progress-bar',
-  template: `<ng-progress aria-label="Page load progress" i18n-aria-label />`,
   imports: [NgProgressbar],
+  template: `<ng-progress aria-label="Page load progress" i18n-aria-label />`,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProgressBarComponent {
diff --git a/src/app/features/authentication/pages/log-in/log-in.component.ts b/src/app/features/authentication/pages/log-in/log-in.component.ts
@@ -35,9 +35,6 @@ import '@shoelace-style/shoelace/dist/components/icon/icon.js';
 
 @Component({
   selector: 'app-log-in',
-  templateUrl: './log-in.component.html',
-  styleUrl: './log-in.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     ReactiveFormsModule,
     RouterModule,
@@ -46,6 +43,9 @@ import '@shoelace-style/shoelace/dist/components/icon/icon.js';
     LowercaseDirective,
     TrimDirective,
   ],
+  templateUrl: './log-in.component.html',
+  styleUrl: './log-in.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class LogInComponent {
diff --git a/src/app/features/authentication/pages/my-account/my-account.component.ts b/src/app/features/authentication/pages/my-account/my-account.component.ts
@@ -34,9 +34,6 @@ import { TrimDirective } from '~core/directives/trim.directive';
 
 @Component({
   selector: 'app-my-account',
-  templateUrl: './my-account.component.html',
-  styleUrl: './my-account.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     RouterModule,
     ReactiveFormsModule,
@@ -47,6 +44,9 @@ import { TrimDirective } from '~core/directives/trim.directive';
     NgOptimizedImage,
     TrimDirective,
   ],
+  templateUrl: './my-account.component.html',
+  styleUrl: './my-account.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class MyAccountComponent implements OnInit {
diff --git a/src/app/features/authentication/pages/register/register.component.ts b/src/app/features/authentication/pages/register/register.component.ts
@@ -36,9 +36,6 @@ import '@shoelace-style/shoelace/dist/components/checkbox/checkbox.js';
 
 @Component({
   selector: 'app-register',
-  templateUrl: './register.component.html',
-  styleUrl: './register.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     RouterModule,
     ReactiveFormsModule,
@@ -48,6 +45,9 @@ import '@shoelace-style/shoelace/dist/components/checkbox/checkbox.js';
     LowercaseDirective,
     TrimDirective,
   ],
+  templateUrl: './register.component.html',
+  styleUrl: './register.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class RegisterComponent implements OnInit {
@@ -107,7 +107,7 @@ export class RegisterComponent implements OnInit {
     this.authService
       .register({
         ...this.registerForm.getRawValue(),
-        favouritePokemonId: Number(this.pokemonValidator.pokemonId()),
+        favouritePokemonId: this.pokemonValidator.pokemonId() satisfies number,
       } as RegisterFormValue)
       .pipe(
         takeUntilDestroyed(this.destroyRef),
diff --git a/src/app/features/home/home.component.scss b/src/app/features/home/home.component.scss
@@ -25,7 +25,7 @@ $separator-margin: 0 10px 35px 0;
   .cards__grid-container {
     display: grid;
     grid-template-columns: repeat(1, 1fr);
-    grid-gap: var(--spacing-r-xxl);
+    gap: var(--spacing-r-xxl);
     margin-block: var(--spacing-r-xl);
     margin-block-end: var(--spacing-r-5xl);
 
diff --git a/src/app/features/home/home.component.ts b/src/app/features/home/home.component.ts
@@ -7,11 +7,11 @@ import { AnalyticsService } from '~core/services/analytics.service';
 
 @Component({
   selector: 'app-home',
+  imports: [DecorativeHeaderComponent, NgOptimizedImage, CardComponent],
+  standalone: true,
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [DecorativeHeaderComponent, NgOptimizedImage, CardComponent],
 })
 export class HomeComponent {
   private readonly analyticsService = inject(AnalyticsService);
diff --git a/src/app/features/pokemon/components/catch-animation/catch-animation.component.ts b/src/app/features/pokemon/components/catch-animation/catch-animation.component.ts
@@ -2,12 +2,12 @@ import type { OnInit } from '@angular/core';
 import {
   ChangeDetectionStrategy,
   Component,
+  DOCUMENT,
   effect,
   inject,
   input,
   signal,
   type WritableSignal,
-  DOCUMENT
 } from '@angular/core';
 import { NgOptimizedImage, NgStyle } from '@angular/common';
 import { BattleEvent } from '~features/pokemon/components/pokedex/enums/pokedex-action.enum';
@@ -29,14 +29,14 @@ enum PokemonState {
 
 @Component({
   selector: 'app-catch-animation',
+  imports: [NgOptimizedImage, NgStyle],
   templateUrl: './catch-animation.component.html',
   styleUrl: './catch-animation.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [catchAnimations],
-  imports: [NgOptimizedImage, NgStyle],
   host: {
     '(window:resize)': 'loadAnimationPositions()',
   },
+  animations: [catchAnimations],
 })
 export class CatchAnimationComponent implements OnInit {
   private readonly document = inject(DOCUMENT);
diff --git a/src/app/features/pokemon/components/pokedex/pokedex.component.scss b/src/app/features/pokemon/components/pokedex/pokedex.component.scss
@@ -39,8 +39,8 @@ $pokedex-text-dark: #032d28;
       height: 100%;
       transform: rotateX(360deg);
       transform-origin: 0 100%;
-      transition: transform 1s;
       transform-style: preserve-3d;
+      transition: transform 1s;
 
       figure {
         position: absolute;
diff --git a/src/app/features/pokemon/components/pokedex/pokedex.component.ts b/src/app/features/pokemon/components/pokedex/pokedex.component.ts
@@ -22,11 +22,11 @@ import { AuthenticationService } from '~features/authentication/services/authent
 
 @Component({
   selector: 'app-pokedex',
+  imports: [PokemonImageComponent, FirstTitleCasePipe],
   templateUrl: './pokedex.component.html',
   styleUrls: ['./pokedex.component.scss', './pokedex-pads.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  imports: [PokemonImageComponent, FirstTitleCasePipe],
 })
 export class PokedexComponent implements OnInit {
   private readonly userService = inject(UserService);
diff --git a/src/app/features/pokemon/components/pokemon-battlefield/pokemon-battlefield.component.ts b/src/app/features/pokemon/components/pokemon-battlefield/pokemon-battlefield.component.ts
@@ -8,10 +8,10 @@ import { CatchAnimationComponent } from '~features/pokemon/components/catch-anim
 
 @Component({
   selector: 'app-pokemon-battlefield',
+  imports: [PokemonImageComponent, CatchAnimationComponent, NgOptimizedImage],
   templateUrl: './pokemon-battlefield.component.html',
   styleUrl: './pokemon-battlefield.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [PokemonImageComponent, CatchAnimationComponent, NgOptimizedImage],
 })
 export class PokemonBattlefieldComponent implements OnInit {
   readonly pokemonBattleEvent = input.required<WritableSignal<BattleEvent>>();
diff --git a/src/app/features/pokemon/components/pokemon-card/pokemon-card.component.ts b/src/app/features/pokemon/components/pokemon-card/pokemon-card.component.ts
@@ -8,10 +8,10 @@ import '@shoelace-style/shoelace/dist/components/skeleton/skeleton.js';
 
 @Component({
   selector: 'app-pokemon-card',
+  imports: [CardComponent, FirstTitleCasePipe],
   templateUrl: './pokemon-card.component.html',
   styleUrl: './pokemon-card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CardComponent, FirstTitleCasePipe],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class PokemonCardComponent implements OnInit {
diff --git a/src/app/features/pokemon/components/pokemon-image/pokemon-image.component.ts b/src/app/features/pokemon/components/pokemon-image/pokemon-image.component.ts
diff --git a/src/app/features/pokemon/components/pokemon-search-input/pokemon-search-input.component.ts b/src/app/features/pokemon/components/pokemon-search-input/pokemon-search-input.component.ts
diff --git a/src/app/features/pokemon/pages/my-pokemon/my-pokemon.component.ts b/src/app/features/pokemon/pages/my-pokemon/my-pokemon.component.ts
diff --git a/src/app/features/pokemon/pages/pokemon-detail/pokemon-detail.component.ts b/src/app/features/pokemon/pages/pokemon-detail/pokemon-detail.component.ts
diff --git a/src/app/features/pokemon/services/pokemon.service.ts b/src/app/features/pokemon/services/pokemon.service.ts
diff --git a/src/server.ts b/src/server.ts
diff --git a/tsconfig.json b/tsconfig.json
