chore(app): update PokemonDetailComponent layout and PokemonCardComponent behavior

- Add `PokemonSearchInputComponent` to `PokemonDetailComponent` layout.
- Wrap `PokemonCardComponent` content with a link to the Pokémon details page.
- Adjust maximum error limit for bundle size in `angular.json`.

Author: Ismaestro

angular.json

@@ -46,7 +46,7 @@
               {
                 "type": "initial",
                 "maximumWarning": "500kB",
-                "maximumError": "1MB"
+                "maximumError": "600kB"
               },
               {
                 "type": "anyComponentStyle",

src/app/features/pokemon/pages/pokemon-detail/pokemon-detail.component.html

@@ -1,5 +1,8 @@
 @let pokemon = pokemonResource.value();
 @if (pokemon) {
+  <div class="pokemon-search-input__container">
+    <app-pokemon-search-input />
+  </div>
   <app-pokemon-battlefield [pokemon]="pokemon" [pokemonBattleEvent]="pokemonBattleEvent" />
   <div class="pokedex__container">
     <app-pokedex [pokemon]="pokemon" [pokemonBattleEvent]="pokemonBattleEvent" />

src/app/features/pokemon/pages/pokemon-detail/pokemon-detail.component.scss

@@ -8,6 +8,10 @@ $pokedex-container-offset: 60px;
 
   align-items: center;
 
+  .pokemon-search-input__container {
+    margin: 0 0 var(--spacing-r-4xl) 0;
+  }
+
   .pokedex__container {
     margin: var(--spacing-r-4xl) 0;
 

src/app/features/pokemon/pages/pokemon-detail/pokemon-detail.component.ts

@@ -16,10 +16,11 @@ import { translations } from '~locale/translations';
 import { AlertService } from '~core/services/ui/alert.service';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { map } from 'rxjs';
+import { PokemonSearchInputComponent } from '~shared/components/pokemon-search-input/pokemon-search-input.component';
 
 @Component({
   selector: 'app-pokemon-detail',
-  imports: [PokemonBattlefieldComponent, PokedexComponent],
+  imports: [PokemonBattlefieldComponent, PokedexComponent, PokemonSearchInputComponent],
   templateUrl: './pokemon-detail.component.html',
   styleUrl: './pokemon-detail.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/features/user/my-pokemon/components/pokemon-card/pokemon-card.component.html

@@ -1,18 +1,20 @@
 @if (!loading()) {
-  <app-card>
-    <ng-container ngProjectAs="heading">
-      <h2 class="card__heading">{{ pokemon()?.name | firstTitleCase }}</h2>
-    </ng-container>
-    <ng-container ngProjectAs="body">
-      <div class="pokemon__image-container">
-        <!-- eslint-disable-next-line @angular-eslint/template/prefer-ngsrc -->
-        <img alt="pokemon" i18n-alt width="100" height="100" [src]="pokemonImage || ''" />
-      </div>
-      <p i18n>N.º: {{ pokemon()?.order }}</p>
-      <p i18n>Height: {{ pokemon()?.height }} dm</p>
-      <p i18n>Weight: {{ pokemon()?.weight }} hg</p>
-    </ng-container>
-  </app-card>
+  <a class="pokemon__link" [routerLink]="POKEMON_URLS.detail(pokemonId())">
+    <app-card>
+      <ng-container ngProjectAs="heading">
+        <h2 class="card__heading">{{ pokemon()?.name | firstTitleCase }}</h2>
+      </ng-container>
+      <ng-container ngProjectAs="body">
+        <div class="pokemon__image-container">
+          <!-- eslint-disable-next-line @angular-eslint/template/prefer-ngsrc -->
+          <img alt="pokemon" i18n-alt width="100" height="100" [src]="pokemonImage || ''" />
+        </div>
+        <p i18n>N.º: {{ pokemon()?.order }}</p>
+        <p i18n>Height: {{ pokemon()?.height }} dm</p>
+        <p i18n>Weight: {{ pokemon()?.weight }} hg</p>
+      </ng-container>
+    </app-card>
+  </a>
 } @else {
   <app-card>
     <ng-container ngProjectAs="heading">

src/app/features/user/my-pokemon/components/pokemon-card/pokemon-card.component.ts

@@ -1,14 +1,22 @@
 import type { OnInit } from '@angular/core';
-import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  CUSTOM_ELEMENTS_SCHEMA,
+  input,
+} from '@angular/core';
 import type { Pokemon } from '~features/pokemon/types/pokemon.type';
 import { CardComponent } from '~shared/components/card/card.component';
+import { POKEMON_URLS } from '~core/constants/urls.constants';
 import { FirstTitleCasePipe } from '~shared/pipes/first-title-case.pipe';
+import { RouterLink } from '@angular/router';
 
 import '@shoelace-style/shoelace/dist/components/skeleton/skeleton.js';
 
 @Component({
   selector: 'app-pokemon-card',
-  imports: [CardComponent, FirstTitleCasePipe],
+  imports: [CardComponent, FirstTitleCasePipe, RouterLink],
   templateUrl: './pokemon-card.component.html',
   styleUrl: './pokemon-card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -17,6 +25,8 @@ import '@shoelace-style/shoelace/dist/components/skeleton/skeleton.js';
 export class PokemonCardComponent implements OnInit {
   readonly pokemon = input<Pokemon>();
   readonly loading = input<boolean>();
+  readonly POKEMON_URLS = POKEMON_URLS;
+  readonly pokemonId = computed<string>(() => String(this.pokemon()?.id));
 
   pokemonImage: string | undefined;